javascript - 页面刷新 更改所选选项卡并显示主选项卡。如何保持所选选项卡完好无损？

Question

我正在使用 Atlassian Javascript 框架在我的页面中创建选项卡。每次刷新页面时，它都会返回到默认选项卡并保留所选选项卡。 我在堆栈溢出中搜索相同的问题后添加了这段代码，但它不起作用。

<script>
    $('#prod-discovery a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    // store the currently selected tab in the hash value
    $("ul.tabs-menu > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });
    $('.active').removeClass('active');

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#prod-discovery a[href="' + hash + '"]').tab('show');

</script>

这是我用于创建选项卡的代码:

   <ul class="tabs-menu" role="tablist" id="prod-discovery">
        <li class="menu-item active-tab" role="presentation">
            <a href="#one" id="aui-uid-0-1430814803876" role="tab" aria-selected="true"><strong><h2>Tab One</h2></strong></a>
        </li>

        <li class="menu-item" role="presentation">
            <a href="#two" id="aui-uid-1-1430814803876" role="tab" aria-selected="false"><strong><h2>Tab Two</h2></strong></a>
        </li>

        <li class="menu-item" role="presentation">
            <a href="#three" id="aui-uid-1-1430814803876" role="tab" aria-selected="false"><strong><h2>Tab three</h2></strong></a>
        </li>

        <li class="menu-item" role="presentation">
            <a href="#four" id="aui-uid-1-1430814803876" role="tab" aria-selected="false"><strong><h2>Tab Four</h2></strong></a>
        </li>

        <li class="menu-item" role="presentation">
            <a href="#five" id="aui-uid-1-1430814803876" role="tab" aria-selected="false"><strong><h2>Tab5</h2></strong></a>
        </li>
    </ul>

作为引用，您还可以查看 http://jsfiddle.net/alok15ee/5wpmsqe5/1/

Answer 1

上线:

$('#prod-discovery a[href="' + hash + '"]').tab('show');

是不是少了一个‘#’？使用 substring(1) 从当前选项卡中提取 href 值时，您将删除哈希值。

尝试将上面的行替换为:

    $('#prod-discovery a[href="#' + hash + '"]').tab('show');