Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Как запомнить активную вкладку после перезагрузки страницы?

Как запомнить активную вкладку после перезагрузки страницы?


     20.03.2023    Все вопросы » jQuery    667

вопрос
Есть js код для переключения табов

$(document).on('click', '.tabs-nav li:not(.active)', function(){
	$(this).addClass('active').siblings().removeClass('active');
	var group = $(this).parent('ul').data('group');
	var box = $(this).data('box');
	$('.' + group + ' .box-' + box).addClass('active').siblings().removeClass('active');
});


Их html


<ul class="tabs-nav" data-group="tab_group">
<li data-box="tab1" class="active">Вкладка 1</li>
<li data-box="tab2">Вкладка 2</li>
<li data-box="tab3">Вкладка 3</li>
<li data-box="tab4">Вкладка 4</li>
<li data-box="tab5">Вкладка 5</li>
</ul>

<div class="tab_group">
<div class="box-tab1 active">Содержание 1</div>
<div class="box-tab2">Содержание 2</div>
<div class="box-tab3">Содержание 3</div>
<div class="box-tab4">Содержание 4</div>
<div class="box-tab4">Содержание 5</div>
</div>



.tab_group > div {display: none;}
.tab_group > div.active {display: block;}


Необходимо дописать существующий js чтобы вкладки запоминались даже после обновления страницы.
Желательно запоминать в localStorage

Ответа пока нет


3 комментария

lutskboy
Эксперт

lutskboy - 20 марта 2023 13:57 -


Uralbox
Юзер

Uralbox - 20 марта 2023 15:05 -

Видел этот код, но свой не получается адаптировать.

ruslanhydyrov
Юзер

ruslanhydyrov - 31 марта 2023 19:25 -

Для того чтобы запомнить активную вкладку после перезагрузки страницы DLE, можно использовать механизм хранения данных на клиентской стороне - localStorage.

Вот пример кода на javascript, который сохраняет и загружает активную вкладку:
// Сохраняем активную вкладку в localStorage
$(document).ready(function(){
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('ul.tabs li').removeClass('current');
        $('ul.tabs li[data-tab="'+activeTab+'"]').addClass('current');
        $('.tab-content').removeClass('current');
        $('#'+activeTab).addClass('current');
    }
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        localStorage.setItem('activeTab', tab_id);
    });
});

В этом примере предполагается, что у нас есть список вкладок с классом tabs, каждая вкладка имеет атрибут data-tab с уникальным идентификатором, а содержимое каждой вкладки находится в элементе с соответствующим идентификатором и классом tab-content. Если пользователь кликает на вкладку, мы сохраняем ее идентификатор в localStorage. При загрузке страницы мы проверяем наличие сохраненного идентификатора и, если он есть, активируем соответствующую вкладку.

Этот код можно добавить в шаблон, в котором используется вкладки. Обратите внимание, что localStorage работает только в современных браузерах, так что если вам нужна поддержка старых браузеров, вам может потребоваться использовать альтернативный механизм хранения данных.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 25.09.2014 ufh2  jQuery
наверх