0

単一の Web ページを利用するシンプルなマルチタブ ナビゲーションを作成しようとしています。私は自分のコンテンツを次のようにレイアウトしています：

HTML

<ul id="nav">
    <li><a href="tab1">Tab 1</a></li>
    <li><a href="tab2">Tab 2</a></li>
    <li class="active"><a href="tab3">Tab 3</a></li>
</ul><!--/#nav-->

<div id="content-box">
    <div id="tab1">
        <!--content from tab1-->
    </div><!--/#tab1-->

    <div id="tab2">
        <!--content from tab2-->
    </div><!--/#tab2-->

    <div id="tab3">
        <!--content from tab3-->
    </div><!--/#tab3-->

</div><!--/#content-box-->

jQuery:

$("#nav li").on("click", function(event){
        $("#nav li").removeClass("active");
        $(this).addClass("active");
        $("#content-box").children().hide();
    });

li私の問題は、 with クラスactiveを対応するにリンクする方法がわからないことdivです。すべてのタブ div が非表示に設定されており、.activeSlidesets というクラスがありますvisibility: visible。

4

3 に答える 3

1

html 5data属性を使用してdivをリンクします

html

<ul id="nav">
  <li data-content="tab1">Tab 1</li>
  <li data-content="tab2">Tab 2</li>
  <li data-content="tab3" class="active">Tab 3</li>
</ul><!--/#nav-->

jquery

$("#nav li").on("click", function(event){
    $("#nav li").removeClass("active");
    $(this).addClass("active");
    $("#content-box").children().hide();
    $('#'+ $(this).data('content')).show(); 
    //OR
    $("#content-box").children().removeClass('activeSlide');
    $('#'+ $(this).data('content')).addClass('activeSlide');
});

ここでフィドル

更新しました

これを準備完了関数に追加します

 $(document).ready(){
     $("#content-box").children().hide();
    $("#nav li").on("click", function(event){
      ...... //above function goes here
    });
  
});

更新されたフィドル

ただし、車輪を再発明する代わりにjquery uiタブを使用することをお勧めします... :)

于 2013-04-18T13:15:33.240 に答える
0

クリックイベントの最後に：

$('#' + $('a', this).attr('href')).show();

1 つの Web ページに多くのコンテンツを含めることを計画している場合は、ユーザーが特定のコンテンツをブックマークする方法を検討することをお勧めしますが、上記の設計だけでは非常に困難になります。

于 2013-04-18T13:14:21.677 に答える
0

これに変えて、

HTML

ID tab1、tab2、tab3 を削除します。クラスを「代わりにタブ」に配置します。

お気に入り、

<div class="tab">

代わりに、id="tab1" & "tab2" & "tab3"

ジャバスクリプト

$("#nav li")
    .live("click", function(event){
            var _index = $(this).index();
            $(".tab").hide();
            $(".tab:eq("+_index+")").show();

            $(this).siblings().removeClass('active');
            $(this).addClass('active');
     });
于 2013-04-18T13:17:48.257 に答える