Табы (вкладки) для сайта на CSS и JavaScript – 3 способа

В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на отдельные части, а затем выводить в определённый момент времени только одну порцию этих данных.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько секций.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально обычно оформляют в виде вкладок или группы кнопок. При нажатии ни них они включают видимость одного какого-то блока с контентом и скрывают другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках (input
с type="radio"
) и CSS селекторе checked.
HTML и CSS код таба:
<style>
.tabs {
font-size: 0;
}
.tabs>input[type="radio"] {
display: none;
}
.tabs>div {
/* скрыть контент по умолчанию */
display: none;
border: 1px solid #e0e0e0;
padding: 10px 15px;
font-size: 16px;
}
/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
display: block;
}
.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
padding: 2px 8px;
font-size: 16px;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
position: relative;
top: 1px;
}
.tabs>label:not(:first-of-type) {
border-left: none;
}
.tabs>input[type="radio"]:checked+label {
background-color: #fff;
border-bottom: 1px solid #fff;
}
</style>
<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">Вкладка 1</label>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2">Вкладка 2</label>
<input type="radio" name="tab-btn" id="tab-btn-3" value="">
<label for="tab-btn-3">Вкладка 3</label>
<div id="content-1">
Содержимое 1...
</div>
<div id="content-2">
Содержимое 2...
</div>
<div id="content-3">
Содержимое 3...
</div>
</div>

В этом варианте радиокнопки связаны с определённым label
. Связь элемента label
с input
выполнена через атрибут for
. Это действие необходимо для того, чтобы можно было скрыть элементы input
, а управление ими (установку checked
) выполнять через клики по элементам label
.
Стилизация выбранного элемента label
в этом примере выполнена с использованием селектора input[type="radio"]:checked+label
. Этот селектор выбирает элемент label
, который расположен сразу же после элемента input[type="radio"]
, находящимся в состоянии checked
.
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
display: block;
}
Отобразить вкладки можно по-разному. В следующем примере они визуально отображаются как кнопки.
CSS код для создания адаптивных вкладок в виде кнопок:
.tabs>input[type="radio"] {
display: none;
}
.tabs>input[type="radio"]:checked+label {
background-color: #bdbdbd;
}
.tabs>div {
/* скрыть контент по умолчанию */
display: none;
border: 1px solid #eee;
padding: 10px 15px;
border-radius: 4px;
}
/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
display: block;
}
.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #eee;
border: 1px solid transparent;
padding: 2px 8px;
font-size: 16px;
line-height: 1.5;
border-radius: 4px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
margin-right: 6px;
cursor: pointer;
margin-bottom: 10px;
}
.tabs>label:first-of-type {
margin-left: 0;
}

В этом примере вкладки визуально представлены в виде хэштегов:
.tabs>input[type="radio"] {
display: none;
}
.tabs>input[type="radio"]:checked+label {
font-weight: bold;
cursor: default;
}
.tabs>div {
display: none;
border-top: 1px solid #eee;
padding: 10px 15px;
}
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
display: block;
}
.tabs>label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
padding: 2px 8px;
font-size: 14px;
line-height: 1.5;
transition: color 0.15s ease-in-out;
margin-left: 6px;
cursor: pointer;
margin-bottom: 4px;
}
.tabs>label:first-of-type {
margin-left: 0;
}

Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target
:
<style>
.tabs {
display: flex;
flex-direction: column;
}
.tabs__links {
display: flex;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
order: 0;
white-space: nowrap;
background-color: #fff;
border: 1px solid #e3f2fd;
box-shadow: 0 2px 4px 0 #e3f2fd;
}
.tabs__links>a {
display: inline-block;
text-decoration: none;
padding: 6px 10px;
text-align: center;
color: #1976d2;
}
.tabs__links>a:hover {
background-color: rgba(227, 242, 253, 0.3);
}
.tabs>#content-1:target~.tabs__links>a[href="#content-1"],
.tabs>#content-2:target~.tabs__links>a[href="#content-2"],
.tabs>#content-3:target~.tabs__links>a[href="#content-3"] {
background-color: #bbdefb;
cursor: default;
}
.tabs>div:not(.tabs__links) {
display: none;
order: 1;
}
.tabs>div:target {
display: block;
}
</style>
<div class="tabs">
<div id="content-1">
Содержимое 1...
</div>
<div id="content-2">
Содержимое 2...
</div>
<div id="content-3">
Содержимое 3...
</div>
<div class="tabs__links">
<a href="#content-1">Вкладка 1</a>
<a href="#content-2">Вкладка 2</a>
<a href="#content-3">Вкладка 3</a>
</div>
</div>

Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target
можно так:
.tabs>#content-1:target~.tabs__links>a[href="#content-1"],
.tabs>#content-2:target~.tabs__links>a[href="#content-2"],
.tabs>#content-3:target~.tabs__links>a[href="#content-3"] {
background-color: #bbdefb;
cursor: default;
}
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
.tabs {
display: flex;
flex-direction: column;
}
.tabs__links {
display: flex;
flex-direction: row;
order: 0;
white-space: nowrap;
margin-bottom: 15px;
background-color: #fff;
border: 1px solid #e3f2fd;
box-shadow: 0 2px 4px 0 #e3f2fd;
}
.tabs__links>a {
display: inline-block;
text-decoration: none;
color: #1976d2;
padding: 6px 10px;
text-align: center;
}
.tabs__links>a:hover {
background-color: rgba(227, 242, 253, 0.3);
}
.tabs>#content-1:target~.tabs__links>a[href="#content-1"],
.tabs>#content-2:target~.tabs__links>a[href="#content-2"],
.tabs>#content-3:target~.tabs__links>a[href="#content-3"] {
background-color: #bbdefb;
cursor: default;
}
.tabs>div:not(.tabs__links) {
display: none;
order: 1;
flex-grow: 1;
}
@media (min-width: 576px) {
.tabs {
flex-direction: row;
}
.tabs__links {
flex-direction: column;
border: none;
box-shadow: none;
}
.tabs__links>a {
border: 1px solid #e3f2fd;
box-shadow: 0 2px 4px 0 #e3f2fd;
margin-bottom: 8px;
}
.tabs__links>a:last-child {
margin-bottom: 0;
}
.tabs>div:not(.tabs__links) {
padding-left: 15px;
}
}
.tabs>div:target {
display: block;
}

При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
Сейчас разберём как можно создать табы на чистом JavaScript (без использования jQuery и каких-либо других библиотек).
Способ реализации на JavaScript может потребоваться для решения задач, которые просто невозможно решить на CSS. Например, когда нужно загружать контент динамически (через AJAX) в момент открытия вкладки.
HTML и CSS:
<style>
.tabs {
border: 1px solid #e0e0e0;
}
.tabs__nav {
display: flex;
flex-wrap: wrap;
list-style-type: none;
background: #fafafa;
margin: 0;
border-bottom: 1px solid #e0e0e0;
}
.tabs__btn {
padding: 0.5rem 0.75rem;
text-decoration: none;
color: black;
text-align: center;
flex-shrink: 0;
flex-grow: 1;
border: 1px solid transparent;
cursor: pointer;
}
.tabs__btn_active {
background: #e0e0e0;
cursor: default;
}
.tabs__btn:not(.tabs__btn_active):hover,
.tabs__btn:not(.tabs__btn_active):focus {
background-color: #eee;
}
.tabs__content {
padding: 1rem;
}
.tabs__pane {
display: none;
}
.tabs__pane_show {
display: block;
}
</style>
<div class="tabs">
<div class="tabs__nav">
<button class="tabs__btn tabs__btn_active">Вкладка 1</button>
<button class="tabs__btn">Вкладка 2</button>
<button class="tabs__btn">Вкладка 3</button>
</div>
<div class="tabs__content">
<div class="tabs__pane tabs__pane_show">
Содержимое 1...
</div>
<div class="tabs__pane">
Содержимое 2...
</div>
<div class="tabs__pane" id="content-3">
Содержимое 3...
</div>
</div>
</div>
JavaScript (с использованием классов):
class ItcTabs {
constructor(target, config) {
const defaultConfig = {};
this._config = Object.assign(defaultConfig, config);
this._elTabs = typeof target === 'string' ? document.querySelector(target) : target;
this._elButtons = this._elTabs.querySelectorAll('.tabs__btn');
this._elPanes = this._elTabs.querySelectorAll('.tabs__pane');
this._eventShow = new Event('tab.itc.change');
this._init();
this._events();
}
_init() {
this._elTabs.setAttribute('role', 'tablist');
this._elButtons.forEach((el, index) => {
el.dataset.index = index;
el.setAttribute('role', 'tab');
this._elPanes[index].setAttribute('role', 'tabpanel');
});
}
show(elLinkTarget) {
const elPaneTarget = this._elPanes[elLinkTarget.dataset.index];
const elLinkActive = this._elTabs.querySelector('.tabs__btn_active');
const elPaneShow = this._elTabs.querySelector('.tabs__pane_show');
if (elLinkTarget === elLinkActive) {
return;
}
elLinkActive ? elLinkActive.classList.remove('tabs__btn_active') : null;
elPaneShow ? elPaneShow.classList.remove('tabs__pane_show') : null;
elLinkTarget.classList.add('tabs__btn_active');
elPaneTarget.classList.add('tabs__pane_show');
this._elTabs.dispatchEvent(this._eventShow);
elLinkTarget.focus();
}
showByIndex(index) {
const elLinkTarget = this._elButtons[index];
elLinkTarget ? this.show(elLinkTarget) : null;
};
_events() {
this._elTabs.addEventListener('click', (e) => {
const target = e.target.closest('.tabs__btn');
if (target) {
e.preventDefault();
this.show(target);
}
});
}
}
Инициализация табов:
new ItcTabs('.tabs');

Инициализация табов на странице осуществляется посредством создания нового объекта типа ItcTabs
и передаче ему в качестве аргумента CSS-селектор или DOM-элемент которой необходимо инициализировать как табы.
Если в качестве аргумента указать селектор класса, то в качестве табов будет инициализирован только первый элемент.
Для того чтобы на странице инициализировать несколько вкладок, можно использовать следующий код:
const tabs = document.querySelectorAll('.tabs');
for (let i = 0, length = tabs.length; i < length; i++) {
new ItcTabs(tabs[i]);
}
Кроме этого, результат вызова new ItcTabs()
можно сохранить в переменную, а затем использовать её для программного переключения вкладок.
Например:
const tab = new ItcTabs('.tabs');
// программно переключиться на 2 вкладку (1 – индекс вкладки, на которую нужно перейти)
tab.showByIndex(1);
Краткое описание исходного кода JavaScript
Исходный JavaScript построен на основе класса ItcTabs
.
В конструкторе:
this._elTabs
- это DOM-элемент, содержимое которого нужно инициализировать в качестве табов;this._elButtons
- элементы, которые представляют собой вкладки;this._elPanes
- элементы, содержащие контент, который необходимо переключать с помощью вкладок.
Установка обработчика для события click
осуществляется в методе _events()
. Данный метод вызывается в конструкторе.
Для отображения определённого контента в зависимости от нажатой вкладки выполняется с помощью метода show()
. Элемент, на который нажали передаём в качестве аргумента:
this.show(target);
Метод showByIndex(index)
предназначен для перехода на вкладку по её индексу.
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
const elTab = document.querySelector('.tabs');
// инициализация elTab как табы
const tab = new ItcTabs(elTab);
const index = localStorage.getItem('tabs-index');
index > -1 ? tab.showByIndex(index) : null;
elTab.addEventListener('tab.itc.change', (e) => {
const index = elTab.querySelector('.tabs__btn_active').dataset.index;
localStorage.setItem('tabs-index', index);
});
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
window.onstorage = (e) => {
tab.showByIndex(e.newValue);
};
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
<div class="tabs" id="tabs-1">...</div>
<div class="tabs" id="tabs-2">...</div>
<script>
class ItcTabs { ... }
// массив табов
const tabs = {};
const elTabs = document.querySelectorAll('.tabs');
const storage = localStorage.getItem('tabs');
let storageData = {};
elTabs.forEach(el => {
tabs[el.id] = new ItcTabs(el);
el.addEventListener('tab.itc.change', (e) => {
const index = +el.querySelector('.tabs__btn_active').dataset.index;
storageData[el.id] = index;
localStorage.setItem('tabs', JSON.stringify(storageData));
})
})
if (storage) {
storageData = JSON.parse(storage);
for (let key in storageData) {
if (tabs.hasOwnProperty(key)) {
tabs[key].showByIndex(storageData[key]);
}
}
}
</script>
4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видео.

Контент вкладок:
<div class="tabs">
<div class="tabs__nav">
<button class="tabs__btn tabs__btn_active">Вкладка 1</button>
<button class="tabs__btn">Вкладка 2</button>
<button class="tabs__btn">Вкладка 3</button>
</div>
<div class="tabs__content">
<div class="tabs__pane tabs__pane_show">
<div class="iframe">
<div class="player" id="player-1" data-video-id="5NTvXKUXEX4" data-width="560" data-height="315"></div>
</div>
</div>
<div class="tabs__pane">
<div class="iframe">
<div class="player" id="player-2" data-video-id="Cy35h6DF8hY" data-width="560" data-height="315"></div>
</div>
</div>
<div class="tabs__pane">
<div class="iframe">
<div class="player" id="player-3" data-video-id="6tyB97J1cVA" data-width="560" data-height="315"></div>
</div>
</div>
</div>
</div>
В элементах .player
атрибут data-video-id
определяет videoId
ролика, а data-width
и data-height
- ширину и высоту iframe
.
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
const elScript = document.createElement('script');
elScript.src = 'https://www.youtube.com/iframe_api';
document.head.append(elScript);
Создание <iframe>
и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady
:
const players = {};
function onYouTubeIframeAPIReady() {
document.querySelectorAll('.player').forEach(el => {
players[el.id] = new YT.Player(el.id, {
height: el.dataset.height,
width: el.dataset.width,
videoId: el.dataset.videoId
});
})
}
Приостанавливает воспроизведение видео будем посредством метода pauseVideo
, который будем выполнять при переключении вкладки (используя для этого событие tab.itc.change
):
elTab.addEventListener('tab.itc.change', (e) => {
const paneFrom = e.detail.paneFrom;
if (paneFrom) {
const player = paneFrom.querySelector('.player');
player ? players[player.id].pauseVideo() : null;
}
});
Добрый день! Помогите пожалуйста , не могу понять почему выдает ошибку ((
HTML: CSS: JavaScript:Привет! Поправил ошибки в JavaScript-коде:
Вопросы:
1. Как осуществить вариант №1 (radio button), если input и label все вместе спрятаны внутрь отдельного блока?
Типа:
Только без :has, который никем (почти) не поддерживается и без JS (понятное дело).
2. В варианте №2 (:target) при первичной загрузке страницы содержимое не отображается никакое)
1. Можно только с использованием :has(), как-то по-другому только на CSS не получится
2. С :target этот момент можно доделать, чтобы по умолчанию отображалась, например, 1 вкладка (пример)
Благодарю вас за подробную развернутую статью на данную тему и за максимально просто изложенный материал.
У меня вопрос следующего рода: как сделать «табы в табах»
Пример: на сайте по продаже пластиковых окон нужно вывести информацию в виде:
Табы (Уровень 1): типы конструкций, всего 4 типа конструкций;
В зависимости от типа выбранной конструкции подгрузить картинку (с этим разобрался) и блок с табами «виды комплектаций», их 7 штук
Табы (Уровень 2): виды комплектаций, всего 7 видов комплектаций.
Могли бы вы такой пример подробно рассмотреть, буду вам очень признателен.
Сделал пример, если конечно правильно понял и сделал то что нужно (правда пришлось немного JavaScript код табов изменить): перейти.
Подскажите, столкнулся с такой проблемой.
Взял пример реализации через JS.
Если кликаю на свободное место вкладки, то работает, если кликаю к примеру по тексту вкладки, то нет.
Как реализовать, чтобы по клику на любой элемент внутри родителя сработало переключение?
<img
src=«https://itchief.ru/assets/uploadify/f/8/6/f86bf8fc0c6125d9dd8f5f48a2490897s.jpg» class=«fancybox thumbnail center»>
Есть табы с категориями, в каждой из категорий есть табы с товаром, переключение между категориями и товарами написано на чистом Javascript, а теперь проблема. Необходимо чтобы по ссылке с другой страницы открывалась необходимая категория и товар. Дайте пример пожалуйста, я не силен в js((
Эта ссылка (https://itchief.ru/examples/lab.php?topic=javascript&file=tabs-08&tab=2) откроет вторую вкладку, а эта (https://itchief.ru/examples/lab.php?topic=javascript&file=tabs-08&tab=3) — третью.
Сам код тут будет простой, нужно получить значение GET-параметра tab и передать его значение функции которая переключает вкладки:
Очень интересные и полезные примеры работы скриптов, но к сожалению для решения свой задачи ничего подходящего не нашёл.
Возможно похожее есть решение с синхронизацией табов на разных страница как на примере itchief.ru/examples/lab.php?topic=javascript&file=tabs-v3, но немного не то что надо.
Александр, может Вы как мастер сможете помочь с реализацией моей задачи.
У меня на сайте есть 2 отдельный блока div.
В одном блоке содержится информация от квадроциклах, те. Есть цена и характеристики, а во втором блоке есть табы, в которых есть информация о предоставляемых услугах, в каждом табе разная услуга.
Зада состоит в том, чтобы при клике на каждом табе справа менялась цена.
Например:
Клик по табу №1 справа менялась цена в левом блоке и так при нажатии на каждый таб. пример на картинке
Буду очень признателен за помощь.
После этого добавить скрипт, который будет при переключении вкладки изменять цену:
Пример: https://itchief.ru/examples/lab.php?topic=javascript&file=tabs-09
Ребят. Использую Табы с использованием JavaScript. Главный код сначала в посте. Без дополнений.
У меня важный вопрос:
У меня табы с плеерами (iframe).
Так вот, как остановить подзагрузку и воспроизведение видео, при переходе на другую вкладку.
А то открываю другую, а на первой идет все и не останавливается. И соответственно грузятся сразу все вкладки.
Если бы разрешить загружать основную только, а остальные при переключении, останавливая первую…
Заранее благодарю, если есть решение!
Добавил в статью пример табов, содержащие YouTube видео. При переключении видео приостанавливается.
Открыть пример
Спасибо огромное!!!
Вопрос такой: не подскажите как можно задействовать табы в вопросе, когда необходимо сделать подобный блок:
— листающийся слайдер с категориями товара;
— ниже блок с первым товаром из выбранной категории товаров и в этом блоке без перезагрузки страницы можно выбрать другой товар (торговое предложение по типу SKU битрикс), с другой ценой и например расцветкой, но относящийся к основному товару.
Меняются фото, цена и описание.
Пример блока:
prnt.sc/10xv629
sklad-kuhni.moscow/
То есть в данном случае нужно категории сделать с переключением и без перезагрузки страницы, внутри категории нужно отобразить первый товар (а в нем своего рода торговые предложения, ну либо же другие товары данной категории, просто в виде иконок цветов), при переключении выбора цвета, меняется содержимое блока и тоже без перезагрузки.
Как копать в сторону аякса — это тоже на данный момент по знаниям проблематично…
Подскажите, пожалуйста, как реализовать возможность переключения сразу нескольких табов кнопкой?
Для примера: у меня 5 блоков, в каждом по 2 вкладке. Над ними 2 кнопки, которые должны переключить сразу все табы.
Можно например так (открыть пример):
Для этого необходимо (открыть пример):
1. Добавить кнопку:
2. Создать функцию getTabsPaneContent, которая должна будет возвращать то, что мы хотим увидеть в новой вкладке:
3. Получить в JavaScript саму кнопку и привязать к ней обработчик события click, который будет добавлять новую вкладку с контентом, определяемым функцией getTabsPaneContent:
Сперва, спасибо за полезную статью )
Хочу использовать вот эти вертикальные табы itchief.ru/examples/lab.php?topic=css&file=tabs-v4 <itchief.ru/examples/lab.php?topic=css&file=tabs-v4> на сайте, но не могу решить вопрос с отображением сразу контента первой вкладки. Знаю, что можно страницу itchief.ru/examples/output.php#content-1 <itchief.ru/examples/output.php#content-1> открывать, но они у меня на главной будут сразу и нужно чтобы сразу была активна первая вкладка.
Как такое можно реализовать?
Буду признателен за ответ.
А также внести необходимые изменения в CSS. Готовый пример можно посмотреть здесь.
Остальные примеры в статье разобрал, проверил на своем сайте, все работает как положено, кроме одного загадочного для меня явления))) Одни табы с одним контентом у меня на одной странице, другие с другим контентом на совершенно другой странице. Футер где скрипт, на всем сайте один и тот же. Табы работают, но допустим в хроме на одной странице с табами вкладка остаётся после F5 которую открыл, на другой local storage не срабатывает. В мозилле наоборот, та которая не работала в хроме, работает. «Мудрый» код скрипта покажу завтра
Как этот пример работает? В этом примере к табам добавляется id:
Они нужны чтобы определить какой это таб.
Далее выполняем их инициализацию следующим образом
Теперь у нас в mytabs['tabs-1'] и mytabs['tabs-2'] находятся результаты соответственно вызова $tabs для первого и второго tabs.
Сохранение данных в LocalStorage в этом примере выполняется в таком формате:
Вам нужно написать что-то подобное.
такая конструкция отлично работает, если табы на одной и той же странице. но если они расположены на разных страницах, то не работает, пробовал по разному ничего пока не получается.
Например:
Не срабатывает указанный метод.
Необходимо перейти на определенную вкладку с другой страницы.
index.html — products.html#content-2 например
itchief.ru/assets/uploadify/4/5/3/453a9690d5d48b71c6bbf050a7894874.jpg