0

我的标签式菜单及其内容的 html：

<div class="tab-menu"> <!-- menu -->
    <ul>
        <li><a href="#tab1">link to tab 1</a></li>
        <li><a href="#tab2">link to tab 2</a></li>
        <li><a href="#tab3">link to tab 3</a></li>
    </ul>
</div>
<div class="tab-wrapper"> <!-- content -->
<!-- BEGIN FIRST TAB -->
    <div id="tab1" class="tab">first tab content</div>
    <div id="tab2" class="tab">second tab content</div>
    <div id="tab3" class="tab">third tab content</div>
</div>

...并且使菜单工作的脚本是

    // Displays the first tab when 
$(".tabs").each(function(){
    $(this).find(".tab").hide();
    $(this).find(".tab-menu li:first a").addClass("active").show();
    $(this).find(".tab:first").show();
});

$(".tabs").each(function(){

    $(this).find(".tab-menu a").click(function() {

        $(this).parent().parent().find("a").removeClass("active");
        $(this).addClass("active");
        $(this).parent().parent().parent().parent().find(".tab").hide();
        var activeTab = $(this).attr("href");
        $(activeTab).fadeIn();
        return false;

    });

});

当用户单击选项卡时，菜单起作用。这意味着菜单默认打开时第一个<div>可见，当用户单击另一个选项卡时，对应的选项会<div>按预期显示。但是，当我输入 url 时mysite/path#tab2，它仍然会打开 tab1 打开。我需要做什么才能使用 tab2 打开它？具体来说，如何访问 url 并提取标签？我想在 javascript 中执行此操作

编辑：似乎document.location.href提供了完整的网址。如何解析和提取此 url 中的标签？

4

1 回答 1

1

加载页面时，检查location.hash属性并相应地执行：

$(function() {
    $(".tab").hide();
    $(".tab-menu a").removeClass("active");

    $(location.hash).show();
    $(".tab-menu a[href='" + location.hash + "']").addClass("active");
});

比这更好，根本不注册任何click侦听器，只需使用hashchange事件：

$(window).hashchange(function() {
    $(".tab").hide();
    $(".tab-menu a").removeClass("active");

    $(location.hash).show();
    $(".tab-menu a[href='" + location.hash + "']").addClass("active");
});
于 2013-02-17T19:22:27.787 回答