将主页上的锚定标记链接到特定标签

Question

我的网页顶部有一个导航菜单，并有一个下拉菜单。例如在导航服务页面有一个下降我们的其他业务的下降是去一个服务页面，其选项卡结构如下所示：

<section class="tabs"> 

    <ul class="tab-nav"> 
     <li class="active"><a href="#first">First Tab</a></li> 
     <li><a href="#second">Second Tab</a></li> 
     <li><a href="#third">Third Tab</a></li> 
    </ul> 

    <div class="tab-content"> 
     <p>Here's the first piece of content</p> 
    </div> 
    <div class="tab-content active"> 
     <p>My tab is active so I'll show up first! Inb4 tab 3!</p> 
    </div> 
    <div class="tab-content"> 
     <p>Don't forget about me! I'm tab 3!</p> 
    </div> 

</section> 

，我想喜欢让这个我可以用我的阿克尔标签直接链接到我选择的选项卡3或1或2，以及当我使用选项卡刷新的页面不会跳转到活动选项卡时。我怎样才能做到这一点与JavaScript？我用这个代码哈希检查功能位尝试过：

$(function() { 
    $(".tab-content").hide().first().show(); 
    $(".tab-nav li:first").addClass("active"); 

    $(".tab-nav a").on('click', function (e) { 
     e.preventDefault(); 
     $(this).closest('li').addClass("active").siblings().removeClass("active"); 
     $($(this).attr('href')).show().siblings('.tab-content').hide(); 
    }); 

    var hash = $.trim(window.location.hash); 

    if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click'); 

}); 

的问题是，是，当我点击第二个选项卡，它显示了第一个选项卡上的内容...但标签3看起来不错。但是当我点击标签3然后回到标签2时，标签2下面没有显示任何内容。也许有人可以简单地通过我的代码来完成我想要完成的任务？

ps。我为我的标签使用了gumby框架

Answer 1

首先，$($(this).attr('href'))不会找到任何东西，因此无论如何都不会有任何标签工作。

除此之外，散列链接代码似乎很好。

---

我已经重写了代码，以便它现在在下面工作。

链接：http://jsfiddle.net/s8Ttm/2/

代码：

$(".tab-nav a").bind('click', function (e) { 
    e.preventDefault(); 
    $(this).parents('li').addClass("active").siblings().removeClass("active"); 
    $('.tab-content').removeClass('active').hide(); 
    console.log($('.tab-content:eq('+$(this).index()+')')); 
    $('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show(); 
}); 

$('.tab-nav a').first().click(); 

var hash = $.trim(window.location.hash); 
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');