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


Порой бывает необходимым сохранить вкладку, на которой находится пользователь после перезагрузки страницы. Сделать это по большому счёту не сложно и в этой статье небольшой пример JS-кода, который решает проблему.

Итак, ниже код решения проблемы с комментариями.

// этот код сработает после загрузки страницы
// с адресной строки забираем anchor (это будет href нашей вкладки) и вызываем метод show для табы, внутри которой находится a с соотв. адресом
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

//  а этот метод наоборот - ловит переход на вкладку и в адресную строку записывает содержимое ссылки
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

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

На практике проверено — метод рабочий. Если остались вопросы — добро пожаловать в комментарии внизу страницы.

Удачи!

, ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *