Обновление страницы Изменяет выбранную вкладку и показывает основную вкладку. Как я могу сохранить выбранную вкладку без изменений?
Я использую фреймворк 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, а также необходимо удалить в класс активной вкладки.