1

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

现在，当从导航中单击 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();
    }

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

4

1 回答 1

0

尝试

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

于 2013-04-21T02:00:06.747 回答