0

そのため、jQuery UI（タブ付き）を使用して、ページ上の一部のコンテンツをタブ化できるようにしています。しかし、奇妙な問題が起こっています。

「KR」と「O」の2つのタブがあります。「O」タブをクリックすると、正しいコンテンツが表示されます。ただし、[KR]タブをクリックすると、KRとOの両方が表示されますか？以下の画像を確認してください。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

これが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>
4

2 に答える 2

0

まず、最も基本的な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にすべての「メニューボタン」があることを絶対に確認してください。

于 2013-01-28T08:39:04.517 に答える
0

私は理解しました..あなたはそこに間違ったタブIDセレクターを持っています

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

あなたはid="tab-hours" ..を持っていません<div>（しかし、idが間違っていたとしても、タブが他のタブタスクをどのように表示できるのか疑問に思っています。）

とにかくそれはあるべきです

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

これは機能しています

働くフィドル

于 2013-01-28T08:48:05.347 に答える