javascript - 将主页上的 anchor 标记链接到特定选项卡

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>

我想这样做，以便我可以在我的主页上使用我的 achor 标签直接链接到我选择的选项卡 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 下没有显示任何内容。也许有人可以简单地使用我的代码来完成我想要完成的事情？

附言。我正在为我的选项卡使用 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');