Question

所以，我正在使用jQuery UI（带标签）来标记我页面上的一些内容。但是，有一个奇怪的问题正在发生。

我有两个标签，“KR”和“O” - 当我点击“O”标签时，我确实得到了正确的内容。但是，如果我点击“KR”标签，我会得到KR和O？请查看下面的图片以供审核。

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 -->

我使用Javscript，

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

</script>

Answer 1

首先，尝试使用最基本的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中包含所有“菜单按钮”。

Answer 2

我想通了......那里有一个错误的标签名称选择器

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

你没有<div> id =“tab-hours”..（但是我仍然想知道即使id错误，该标签如何能够显示其他标签任务。。）

无论如何应该是

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

这是有效的

working fiddle

jQuery UI选项卡不正确

2 个答案: