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

问题描述：

我正在尝试创建一个使用单个网页的简单的多选项卡式导航。我有我的内容布局像这样：使用jQuery将链接项链接到内容div id

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。

使用[jQueryUI的选项卡的功能]（ http://jqueryui.com/tabs/）。 –

答

使用HTML 5 data属性链接股利

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

但是我recommned你使用jquery ui tab，而不是另起炉灶添加此... :)

我在写这样的答案:-)不错的一个 – Peter

@peter ...谢谢..:) – bipen

点击第二个标签后，是不是一切都隐藏了？数据元素虽然很好知道，谢谢！ – mikey

答

在点击事件的结束：

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

我要提醒，如果你计划有很多的单个网页上的内容，你可能要考虑为用户的方式书签某些内容，仅靠上述设计会很困难。

答

更改此，

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

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

相关推荐