Обновление страницы Изменяет выбранную вкладку и показывает основную вкладку. Как я могу сохранить выбранную вкладку без изменений?

Я использую фреймворк 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/

2 ответа

На линии:

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

не пропал знак "#"? При извлечении href значение из текущей вкладки, используя substring(1)удаляешь хеш.

Попробуйте заставить его работать, заменив строку выше:

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

Мне нужно было добавить <div class="aui-tabs horizontal-tabs" data-aui-persist="true" role="application" id="productdiscoverytabs"> чтобы убедиться, что состояние вкладки сохраняется, которое использует локальное хранилище HTML5, а также необходимо удалить в класс активной вкладки.

Другие вопросы по тегам