0

我正在尝试创建一个使用单个网页的简单的多选项卡导航。我的内容是这样排列的：

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();
    });

我的问题是我不知道如何将liwith 类链接active到相应的div. 我所有的选项卡 div 都设置为隐藏，并且我有一个名为.activeSlidewhich turn sets的类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();

我要提醒的是，如果您打算在单个网页上包含大量内容，您可能需要考虑一种让用户为某些内容添加书签的方法，仅上述设计就很难做到这一点。

于 2013-04-18T13:14:21.677 回答
0

改成这样，

HTML

删除 id tab1、tab2、tab3。放置类“选项卡”。

喜欢，

<div class="tab">

而不是 id="tab1" & "tab2" & "tab3"

JAVASCRIPT

$("#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 回答