Question

我正在尝试创建一个使用单个网页的简单多标签导航。我的内容如下：

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与课程active关联到相应的div。我的所有制表符div都设置为隐藏，我有一个名为.activeSlide的类，它会转换集合visibility: visible。

Answer 1

使用html 5 data属性链接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');
});

fiddle here

<强>更新

将此功能添加到就绪功能

中

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

});

updated fiddle

但是我建议你使用jquery ui tab而不是重新发明轮子......：）

Answer 2

点击活动结束时：

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

我要提醒一下，如果您计划在单个网页上包含大量内容，您可能需要考虑让用户书签某些内容的方式，仅上述设计会很难。

Answer 3

改为此，

HTML

删除id tab1，tab2，tab3。将类别设为“标签”。

像，

<div class="tab">

而不是，id =“tab1”＆amp; “tab2”＆amp; “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');
     });

使用jQuery将链接项连接到内容div id

3 个答案: