javascript - 单击导航时激活 tabber

Question

好吧，我的网站有一个带有 id #nav 的导航，所以我想根据点击导航列表激活一个选项卡。导航 #nav 有一个像这样的 html:-

 <ul id ="nav">
    <li><a href="tab1">Fred</a></li>
    <li><a href="tab2">Thom</a></li>
    <li><a href="tab3">Kay</a></li>
</ul>

现在，当从导航中单击 Fred 时，我想在具有如下 html 的 tabber 上激活此功能

 <ul class="tabs">                                        
         <li><a href="#tab1">Fred</a></li>                                      
         <li><a href="#tab2">Thom</a></li>    
         <li><a href="#tab3">Kay</a></li>       
</ul>

标签内容如下:-

<div id="tab1" class="tab_content">Lorem</div>
<div id="tab2" class="tab_content">Ipsum</div>
<div id="tab3" class="tab_content">Dolor</div>

所以我写了以下jquery行

$("#nav li").click(function() {

         var hash = location.hash;
          var sel = $("ul.tabs li a[href='" + hash + "'], ul#tabs li a[href='" + hash + "']");

    if (sel.length) { 

        sel.addClass("active").parent().addClass("active"); //Activate tab



        $(hash).show();
    }

但是它不起作用:(我做错了什么吗？

Answer 1

尝试

$(function(){

  $("#nav li").click(function(event) {
    var hash = $('a', this).attr('href');
    var sel = $("ul.tabs li a[href='#" + hash + "']");
    sel.trigger('click')
    return false;
  });

  $('.tab_content').hide();
  var tabllis = $('ul.tabs li');
  tabllis.click(function(){
    var $this = $(this).addClass('active');
    var hash = $('a', this).attr('href');

    tabllis.not($this).removeClass('active');

    $('.tab_content').hide();
    $(hash).show();

    return false;
  });

});

演示:Plunker