0

タブ ナビゲーションを使用しようとしていますが、クリックされたタブに基づいて、そのタブに基づいてコンテンツを表示し、他のタブに属するコンテンツを非表示にする必要があります。タブ セクション、タブ コンテンツが入る内部 HTML、およびこれを行うための JavaScript を含めました。機能していません、私が見逃しているアイデアはありますか? ページのタブ セクション

<ul class="wui-tab-nav">
    <li class="wui-first"><a class="wui-link" href="index.html">Home </a></li>
    <li class="wui-sub" id="vol"><a class="wui-link" href="#Vol" rel="tabs1">Business Volume </a></li>
    <li class="wui-sub"><a class="wui-link" href="#Vol2"  rel="tabs2">Infras Volume</a></li>
    <li class="wui-sub"><a class="wui-link" href="#Vol3"  rel="tabs3" >Database Volume</a></li>
    <li class="wui-sub"><a class="wui-link" href="#Vol4"  rel="tabs4">Customer Volume</a></li>
</ul>

タブのコンテンツを配置する div セクション

<DIV id=chart class=wui-inpage-container style="float:left; display: block; overflow: hidden; padding:0; margin:0 auto; border:0;">
    <ul class="tab-content" id="tabs1"> 
            <li id="business_vol1"></li>
            <li id="business_vol2"></li>
            <li id="business_vol3"></li>
            <li id="business_vol4"></li>    
    </ul>

    <ul class="tab-content" id="tabs2"> 
            <li id="Infras1"></li>
            <li id="Infras2"></li>
            <li id="Infras3"></li>                    
    </ul>
</DIV>

クリックタブのコンテンツのみを表示するJavaScript

<script type="text/javascript">
    $(document).ready(function () {

        $('.wui-link a').click(function () {
            switch_tabs($(this));
        });

        switch_tabs($('#vol'));

    });
</script>

<script type="text/javascript">
    function switch_tabs(obj) {
        $('.tab-content').hide();
        $('.tab-content a').removeClass("selected");
        var id = obj.attr("rel");

        $('#' + id).show();
        obj.addClass("selected");
    } 
</script>
4

3 に答える 3

1

<A>ではなく を含む#vol で最初の反復を実行していますdiv。この div、#vol には、機能を完了するための rel="" がありません。

それ以外の場合は、問題ないようです。いくつかのブレークポイントで正しいデータを取得していることを確認するために、いくつかの alert() をスローするかもしれません。

変化する：

switch_tabs($('#vol'));

に：

switch_tabs($('.wui-link:first'));

そしてテスト

于 2013-02-27T21:22:15.540 に答える
1

変化する

$('.wui-link a').click()

に

$('a.wui-link').click()
于 2013-02-27T21:33:38.103 に答える
1

コンテンツのすべての div を非表示にする関数 (jquery . hide() ) を作成し、li をクリックすると、jquery . show() 関数を呼び出して特定の ID で div を表示できます。次に、別のliをクリックすると、すべてを再び非表示にして、divを1つだけ表示する必要があります。私があなたを助けたことを願っています

于 2013-02-27T21:18:10.197 に答える