使用jQuery将链接项连接到content div id

我正在尝试创建一个简单的多选项卡导航，它利用单个网页。我的内容如下所示：

HTML

---

我的问题是我不知道如何将

li

和class

active

链接到相应的

div

。我的所有选项卡div都设置为隐藏，我有一个名为

.activeSlide

的类，它在单击事件结束时将集合

可见性：可见

：

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

---

<>我会提醒你，如果你计划在一个网页上有很多内容，你可能想考虑一种方式来为某些内容添加书签，而上面的设计本身就非常困难。

< P>使用HTML 5代码>数据< /代码>属性链接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-->

已更新

在ready函数中添加此项

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

但是我建议你使用，而不是重新发明轮子…：）

换成这个

HTML

拆下id选项卡1、选项卡2、选项卡3。将类改为“tab”

像

---

我写了一个这样的答案：-）很好，点击第二个标签，不是所有的东西都被隐藏了吗？不过，数据元素很好了解，谢谢@谢谢你。。。你是对的。。。该死我想我现在需要去喝杯咖啡。。无论如何，更新了。。谢谢again@bipen-哈，我刚喝完咖啡，这是我看到它的唯一原因；）@bipen这是可行的，但是当页面第一次加载时它会显示所有内容。在初始加载时，我如何在tab1中显示这些数据？谢谢你迄今为止的回答！使用。

<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-->

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

<div class="tab">

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

            $(this).siblings().removeClass('active');
            $(this).addClass('active');
     });