頁面刷新更改“選定”選項卡並顯示主選項卡。 如何保持所選標簽完整無缺？

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

Answer 2

我需要添加<div class="aui-tabs horizontal-tabs" data-aui-persist="true" role="application" id="productdiscoverytabs">以確保使用HTML5本地存儲的標簽狀態仍然存在，並且還需要刪除到active-tab類。