Question

好的，所以我的网站有一个标识#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

单击导航时激活tabber

1 个答案: