jquery – 打开与锚链接的标签

我有一些典型的标签内容,我真的需要一些帮助.我想实现,当用户尝试通过外部锚链接( http://www.url.com#content2)访问特定选项卡时,导航链接将被激活,并显示正确的选项卡.

感谢您的帮助.

HTML

<nav class="inner-nav">
    <ul>
        <li><a href="#content1">Inner nav navigation link1</a></li>
        <li><a href="#content2">Inner nav navigation link2</a></li>
        <li><a href="#content3">Inner nav navigation link3</a></li>
    </ul>
</nav>

<section class="tab-content" id="content1">
    <article>
        content1 goes here
    </article>
</section>

<section class="tab-content" id="content2">
    <article>
        content2 goes here
    </article>
</section>

<section class="tab-content" id="content3">
    <article>
        content3 goes here
    </article>
</section>

JAVASCRIPT

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

    $(".inner-nav a").click(function(){
        $(".inner-nav li").removeClass("active");
        $(this).parent().addClass("active");
        var currentTab = $(this).attr("href");
        $(".tab-content").hide();
        $(currentTab).show();
        return false;
    });
});

我有一个现场例子here
所以,如果你点击导航,一切都可以正常工作,但如果你想去一个特定的选项卡kajag.com/themes/book_your_travel/location.html#sports_and_nature正确的选项卡不打开.

解决方法

您可以通过在页面加载时检查哈希来解决此问题,然后在右侧选项卡上触发点击,如下所示：

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

    $(".inner-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) $('.inner-nav a[href$="'+hash+'"]').trigger('click');

});