Переход на конкретную вкладку Bootstrap Tabs по ссылке

Быстрый ответ

Для активации конкретной вкладки Twitter Bootstrap при использовании хеша URL-адреса и jQuery можно использовать следующий JavaScript-код:

$(document).ready(function() {
  if(window.location.hash){
    // Воспользуемся хешем URL для выбора вкладки
    $('a[href="' + window.location.hash + '"]').tab('show');
  } else {
    // В случае отсутствия хеша активируем первую вкладку
    $('a[data-toggle="tab"]:first').tab('show');
  }
});

Чтобы активировать нужную вкладку, передайте её ID в адресной строке в формате yourpage.html#tabID.

Изящное обновление хеша URL

Плавное переключение между вкладками можно обеспечить улучшив JavaScript-код:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  // Обновляем хеш URL для отображения активной вкладки
  window.location.hash = e.target.hash;
  // Предотвращаем автоматическую прокрутку страницы к содержимому вкладки
  window.scrollTo(0, 0);
});

Чтобы выделять активную вкладку в строке URL и предотвращать автоматическую прокрутку страницы к вкладке, обработайте событие shown.bs.tab.

Визуализация

Работа с кодом напоминает игру на музыкальном инструменте, таком как пианино 🎹. Каждый элемент (вкладка) производит уникальный звук (содержимое) при его активации:

Ваш музыкальный гид: [🎵 Нота До 🟦, 🎵 Нота Ре 🟩, 🎵 Нота Ми 🟨]

Если вы хотите "сыграть" "Ноту Ре" после обновления страницы или перехода по ссылке:

Звучит: 🎶🟩 (Переходим к "Ноте Ре")

Не забывайте:

• У вкладок разные ID, как у нот разные звуки
• В нашем URL заложена мелодия, указывающая на нужную ноту

Схема мелодии: symphony.com#re-note

Перейдя по этому URL или обновив страницу с таким хешем, мы получим именно "Ноту Ре" 🎯

🔄🔗 → 🎶🟩

Таким образом, с каждым новым посещением каждое посещение становится своеобразным концертом.

Добавляем изящества с помощью HTML5 и localStorage

Создавайте произведения искусства с помощью HTML5 History API, и ваши вкладки будут помнить каждое ваше посещение сайта:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  if(history.pushState) {
    // Фиксируем текущий выбор в истории браузера
    history.pushState(null, null, e.target.hash);
  } else {
    window.location.hash = e.target.hash;
  }
});

Для сохранения последней активной вкладки можно воспользоваться localStorage:

$(document).ready(function() {
  var activeTab = localStorage.getItem('activeTab');
  // Восстанавливаем сохраненное состояние вкладки
  if (activeTab) {
    $('a[href="' + activeTab + '"]').tab('show');
  }
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  // Сохраняем состояние текущей вкладки
  localStorage.setItem('activeTab', e.target.hash);
});

Теперь вкладки будут сохранять своё состояние, даже если браузер будет перезагружен или вкладка будет закрыта.

Распространённые проблемы и способы их решения

Остановка прокрутки

Для предотвращения автоматической прокрутки страницы к вкладке:

window.location.hash = "tab_" + e.target.hash;

Добавьте префикс к хешу, чтобы сохранить фокус на вкладке.

Подробнее об этом расскажет наш спикер на видео

Использование URL-параметров при серверном рендеринге

Приложения, использующие серверный рендеринг, могут динамически обновлять вкладки:

// Используем параметры URL для выбора активной вкладки
let params = new URLSearchParams(window.location.search);
let activeTab = params.get('activeTab');
if(activeTab){
  $('a[href="#' + activeTab + '"]').tab('show');
}

Благодаря использованию параметров URL, быстрый переход к нужной вкладке обеспечивается значительно проще.

Обработка отсутствия хеша URL

В случаях, когда хеш отсутствует в URL, можно использовать следующий код:

if(!window.location.hash) {
  $('a[data-toggle="tab"]:first').tab('show');
}

Для стандартной активации первой вкладки при отсутствии хеша URL.

Полезные материалы

1. Navs · Bootstrap — документация по вкладкам Bootstrap.
2. .on() | jQuery API Documentation — подробности о функции .on(), используемой для обработки событий в jQuery.
3. History API – Web APIs | MDN — обзор API истории браузера для работы со вкладками.
4. URLSearchParams – Web APIs | MDN — как использовать параметры URL.
5. jquery – How can I keep the chosen Bootstrap tab on page refresh? – Stack Overflow — обсуждение различных подходов к сохранению состояния вкладок Bootstrap.
6. Window: localStorage property – Web APIs | MDN — руководство по использованию хранилища localStorage для сохранения информации о сессиях.