Итак, я использую пользовательский интерфейс jQuery (с вкладками), чтобы иметь возможность размещать контент на моей странице. Тем не менее, происходит странная проблема.

У меня есть две вкладки, «KR» и «O» - когда я нажимаю на вкладку «O», я получаю правильный контент. Как бы то ни было, если я нажму на вкладку "KR", я получу и KR, и O? Проверьте изображения ниже для обзора.

enter image description here

enter image description here

Вот код PHP / HTML,

                    <div id="right_side_menu">

                <div id="sub_menu">
                    <ul>
                        <?php if($money_type == TRUE) : ?><li><a href="#tab-coins"><span>Kr</span></a></li> <?php endif ?>
                        <?php if($tasks_type == TRUE) : ?> <li><a href="#tab-hours"><span>O</span></a></li> <?php endif ?>
                        <?php if($hours_type == TRUE) : ?> <li><a href="#tab-tasks"><span>T</span></a></li> <?php endif ?>
                    </ul>
                </div> <!-- end sub_menu -->

                <div class="clear"></div>

                <br />

                <div id="statistics">

                    <?php if($money_type == TRUE) : ?>

                        <div id="tab-coins">
                            <ul>
                                <li><span id="statistics_big"> <?php if($total_year_money == FALSE) { echo '0'; } else { echo $total_year_money; } ?> </span><br><span class="statistics_underline">Kroner totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> <?php if($total_month_money == FALSE) { echo '0'; } else { echo $total_month_money; } ?> </span><br><span class="statistics_underline">Kroner denne måneden</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> <?php if($total_highest_money == FALSE) { echo '0'; } else { echo $total_highest_money; } ?> </span><br><span class="statistics_underline">Høyest salg denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->

                    <?php endif ?>

                    <?php if($hours_type == TRUE) : ?> 

                        <div id="tab-hours">
                            <ul>
                                <li><span id="statistics_big"> <?php if($total_year_hours == FALSE) { echo '0'; } else { echo $total_year_hours; } ?> </span><br><span class="statistics_underline">Timer totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> <?php if($total_month_hours == FALSE) { echo '0'; } else { echo $total_month_hours; } ?> </span><br><span class="statistics_underline">Timer denne måned</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> <?php if($total_highest_hours == FALSE) { echo '0'; } else { echo $total_highest_hours; } ?> </span><br><span class="statistics_underline">Høyest antall timer denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->

                    <?php endif ?>

                    <?php if($tasks_type == TRUE) : ?>

                        <div id="tab-tasks">
                            <ul>
                                <li><span id="statistics_big"> <?php if($total_year_tasks == FALSE) { echo '0'; } else { echo $total_year_tasks; } ?> </span><br><span class="statistics_underline">Arbeidsoppgaver totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> <?php if($total_month_tasks == FALSE) { echo '0'; } else { echo $total_month_tasks; } ?> </span><br><span class="statistics_underline">Arbeidsoppgaver denne måneden</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> <?php if($total_highest_tasks == FALSE) { echo '0'; } else { echo $total_highest_tasks; } ?> </span><br><span class="statistics_underline">Høyest arbeidsoppgaver denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->

                    <?php endif ?>

                    <div class="clear"></div>

                </div>

            </div> <!-- end right side menu -->

И это живой выход,

<div id="right_side_menu">

                <div id="sub_menu">
                    <ul>
                        <li><a href="#tab-coins"><span>Kr</span></a></li>                            <li><a href="#tab-hours"><span>O</span></a></li>                                                   </ul>
                </div> <!-- end sub_menu -->

                <div class="clear"></div>

                <br />

                <div id="statistics">


                        <div id="tab-coins">
                            <ul>
                                <li><span id="statistics_big"> 0 </span><br><span class="statistics_underline">Kroner totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> 0 </span><br><span class="statistics_underline">Kroner denne måneden</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> 0 </span><br><span class="statistics_underline">Høyest salg denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->




                        <div id="tab-tasks">
                            <ul>
                                <li><span id="statistics_big"> 0 </span><br><span class="statistics_underline">Arbeidsoppgaver totalt i år</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_medium"> 0 </span><br><span class="statistics_underline">Arbeidsoppgaver denne måneden</span></li>
                                <div class="clear"></div>
                                <li><span id="statistics_small"> 0 </span><br><span class="statistics_underline">Høyest arbeidsoppgaver denne måneden</span></li>
                            </ul>
                        </div> <!-- end tab-coins -->


                    <div class="clear"></div>

                </div>

            </div> <!-- end right side menu -->

Я использую Javascript,

<script>
$(function() {
    $( "#right_side_menu" ).tabs();
});

</script>
0
Kevin Jolan 28 Янв 2013 в 12:29

2 ответа

Лучший ответ

Я понял .. у вас там неправильный селектор идентификатора вкладки

<li><a href="#tab-hours"><span>O</span></a>
            // -----^----- //here

У вас нет <div> с id = "tab-hours" .. (однако мне все еще интересно, как вкладка смогла показать вам другие задачи вкладки, даже если идентификатор был неправильным ...)

В любом случае это должно быть

<li><a href="#tab-tasks"><span>O</span></a>
             --^-- here

и это работает

рабочая скрипка

0
bipen 28 Янв 2013 в 08:48

Прежде всего, попробуйте, если вы можете заставить вкладки работать с самым основным HTML:

<ul>
    <li><a href="#tabOne">One</a></li>
    <li><a href="#tabTwo">Two</a></li>
    <li><a href="#tabThree">Three</a></li>
</ul>
<div id="tabOne">One</div>
<div id="tabTwo">Two</div>
<div id="tabThree">Three</div>

Я вижу, что вокруг ваших вкладок есть дополнительный HTML-код, который может мешать работе.
Кроме этого, убедитесь, что у вас есть все «кнопки меню» в вашем HTML.

0
Cerbrus 28 Янв 2013 в 08:39