Если вы когда-либо работали с вкладками Bootstrap, вы могли столкнуться с распространенной проблемой: при обновлении страницы или переходе от нее и обратно активная вкладка сбрасывается на вкладку по умолчанию. Однако есть изящное решение этой проблемы с использованием файлов cookie. В этой статье мы рассмотрим несколько способов сохранить открытыми вкладки Bootstrap с помощью файлов cookie. Мы рассмотрим несколько примеров кода и объясним каждый метод в разговорной форме, чтобы вам было проще их понять и реализовать.

Метод 1: JavaScript и файлы cookie

Один из самых простых способов обеспечить сохранение вкладок — использовать JavaScript и файлы cookie. Вот пример фрагмента кода, который поможет вам начать:

// Set the active tab as a cookie
function setActiveTab(tabId) {
  document.cookie = `activeTab=${tabId}`;
}
// Retrieve the active tab from the cookie
function getActiveTab() {
  const cookie = document.cookie
    .split('; ')
    .find(row => row.startsWith('activeTab='));

  if (cookie) {
    return cookie.split('=')[1];
  }

  return null;
}
// Activate the previously selected tab
function activateTabOnLoad() {
  const activeTab = getActiveTab();

  if (activeTab) {
    const tab = document.querySelector(`[data-bs-target="${activeTab}"]`);
    const tabPane = document.querySelector(activeTab);

    if (tab && tabPane) {
      new bootstrap.Tab(tab).show();
      tabPane.classList.add('active');
    }
  }
}
// Call the activateTabOnLoad function when the page loads
window.addEventListener('DOMContentLoaded', activateTabOnLoad);

Объяснение:

В приведенном выше примере мы определяем три функции:

• setActiveTab(tabId): эта функция устанавливает активную вкладку в файле cookie. Он принимает tabIdв качестве аргумента и присваивает его файлу cookie activeTab.
• getActiveTab(): эта функция извлекает активную вкладку из файла cookie. Он разбивает файлы cookie на строки, находит тот, который начинается с «activeTab=”, и возвращает значение активной вкладки.
• activateTabOnLoad(): эта функция вызывается при загрузке страницы. Он извлекает активную вкладку из файла cookie и активирует ее, отображая вкладку и добавляя класс «активный» в панель вкладок.

Метод 2: jQuery и файлы cookie

Если вы уже используете jQuery в своем проекте, вы можете использовать его возможности для упрощения кода. Вот пример:

$(document).ready(function() {
  // Set the active tab as a cookie
  $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
    document.cookie = `activeTab=${e.target.getAttribute('href')}`;
  });

  // Retrieve the active tab from the cookie and activate it
  function activateTabOnLoad() {
    var activeTab = getActiveTab();

    if (activeTab) {
      $('a[data-bs-toggle="tab"][href="' + activeTab + '"]').tab('show');
    }
  }
// Call the activateTabOnLoad function when the page loads
  activateTabOnLoad();

  // Retrieve the active tab from the cookie
  function getActiveTab() {
    var cookie = document.cookie
      .split('; ')
      .find(function(row) {
        return row.startsWith('activeTab=');
      });

    if (cookie) {
      return cookie.split('=')[1];
    }

    return null;
  }
});

Объяснение:

В этом методе мы используем jQuery для упрощения кода и обработки событий табуляции. Логика аналогична методу JavaScript, но мы привязываем событие shown.bs.tabк ссылкам на вкладки, чтобы обновлять файл cookie активной вкладки при каждом отображении вкладки.

Применив любой из этих методов, вы можете гарантировать, что выбранная вкладка останется активной даже после обновления страницы или навигации. Это расширяет возможности пользователя и обеспечивает удобство просмотра. Не забудьте выбрать метод, который лучше всего соответствует требованиям вашего проекта и существующей кодовой базе.

Запоминание выбора вкладок в Bootstrap с помощью файлов cookie: руководство по постоянной навигации с вкладками