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');

不是缺少'#'吗？使用 提取href当前选项卡中的值时substring(1)，您将删除哈希。

尝试通过将上面的行替换为：

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

Answer 2

我需要添加<div class="aui-tabs horizontal-tabs" data-aui-persist="true" role="application" id="productdiscoverytabs">以确保选项卡状态持续存在，它使用 HTML5 本地存储，还需要删除到活动选项卡类。