单击导航时激活tabber

Question

好吧，让我的网站有一个ID为#nav的导航，所以我想根据点击导航列表激活一个tabber。导航#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> 

现在

从导航点击弗雷德的时候，我想激活此在具有这样

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

和标签内容的HTML的焊接设备像这样： -

<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