0

タブ付きコンテンツを含むページを作成するために使用される html と JQuery がいくつかあります。html は以下のとおりです。

<section id="content" class="content">
    <ul class="tabs group">
         <li><a href="#">Tab 1</a></li>
         <li><a href="#">Tab 2</a></li>
         <li><a href="#">Tab 3</a></li>
    </ul>
    <div class="panes">
         <div class="group">
              tab1
         </div>         
         <div class="group">
              tab2
         </div>         
         <div class="group">
              tab3
         </div>   
    </div>
</section>

JQuery は次のとおりです。

<script type="text/javascript">
        $(document).ready(function () {        
            $('.activetab a').each(function () {
                var activeTab = $(this).parents('li').index();
                var paneVisible = $(this).parents('ul').next().children('div').eq(activeTab);
                paneVisible.show().siblings().hide();
            });

            $('.tabs a').click(function () {           
                $(this).parents('li').addClass('activetab').siblings().removeClass('activetab'); var activeTab = $(this).parent('li').index();
                var paneVisible = $(this).parents('ul').next().children('div').eq(activeTab);
                paneVisible.show().siblings().hide();
                return false;
            });
        });
    </script>

このコードは、リンクの 1 つをクリックすると正しいタブのデータが表示されるという意味で機能します。

唯一の問題は、(これらのタブを含む) ページに初めてアクセスしたときに、表示されたすべてのタブからデータを取得することです。最初のタブのデータを表示し、他のすべてのデータを非表示にする (そしてもちろん、最初のタブも強調表示する) には、ドキュメント対応関数に追加のコードが必要です。私がこれを行う方法についてのアイデア。私は JQuery/JavaScript の専門家ではありません。

ありがとう、

サチン

4

2 に答える 2

1

activetab次のように、クラスを<li>内の要素の 1 つに追加するだけul.tabsです。

<li class="activetab"><a href="#">Tab 1</a></li>

ここで実際にそれを見ることができます: http://jsfiddle.net/CAAFZ/

于 2012-05-15T13:45:10.603 に答える
0

特に理由がなければ、JQuery UI のタブを使用してこの機能を実現できます。

http://jqueryui.com/demos/tabs/で確認してください。

それを行う他の方法は、CSS に次を追加することです。

.tabs {display:none;}

そして、あなたの document.ready 関数に追加します

$('.tabs').show();

このようにして、スタイルが良くなるまで、醜いディスプレイはエンドユーザーには見えません。

Wrockの返事を逃した。それもうまくいくでしょう:)

于 2012-05-15T14:00:41.127 に答える