Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких сторонних библиотек (кроме jquery) и никакого лишнего громоздкого кода. Весь HTML можно поменять под свою верстку, только не забудьте тогда поменять и код в скрипте, и в CSS.
HTML для табов
<div class="tabs"> <ul class="tabs__caption"> <li class="active">1-я вкладка</li> <li>2-я вкладка</li> </ul> <div class="tabs__content active"> Содержимое первого блока </div> <div class="tabs__content"> Содержимое второго блока </div> </div><!-- .tabs-->
Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .active
во второй блок div.tabs__content
, а также переместить класс .active
во второй элемент в списке вкладок.
Обязательные CSS-стили для вышеуказанного HTML-кода
.tabs__content { display: none; /* по умолчанию прячем все блоки */ } .tabs__content.active { display: block; /* по умолчанию показываем нужный блок */ }
Для красивого отображения на сайте нужно использовать свои стили.
Подключаем jQuery перед скриптом
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
JS-скрипт для табов
Данный код вы помещаете в свой файл скриптов, если такого нету, то создаете его, например, scripts.js и подключаете после jquery таким образом:
<script src="js/scripts.js"></script>
Содержимое скрипта:
(function($) { $(function() { $('ul.tabs__caption').on('click', 'li:not(.active)', function() { $(this) .addClass('active').siblings().removeClass('active') .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active'); }); }); })(jQuery);
Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie)
Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie). HTML и CSS остается тот же, меняется только скрипт.
$(function() { function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } $('ul.tabs__caption').each(function(i) { var cookie = readCookie('tabCookie' + i); if (cookie) { $(this).find('li').removeClass('active').eq(cookie).addClass('active') .closest('div.tabs').find('div.tabs__content').removeClass('active').eq(cookie).addClass('active'); } }); $('ul.tabs__caption').on('click', 'li:not(.active)', function() { $(this) .addClass('active').siblings().removeClass('active') .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active'); var ulIndex = $('ul.tabs__caption').index($(this).parents('ul.tabs__caption')); eraseCookie('tabCookie' + ulIndex); createCookie('tabCookie' + ulIndex, $(this).index(), 365); }); }); })(jQuery);
Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie)
Пример табов, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie). HTML и CSS остается тот же, меняется только скрипт.
(function($) { $(function() { $('ul.tabs__caption').each(function(i) { var storage = localStorage.getItem('tab' + i); if (storage) { $(this).find('li').removeClass('active').eq(storage).addClass('active') .closest('div.tabs').find('div.tabs__content').removeClass('active').eq(storage).addClass('active'); } }); $('ul.tabs__caption').on('click', 'li:not(.active)', function() { $(this) .addClass('active').siblings().removeClass('active') .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active'); var ulIndex = $('ul.tabs__caption').index($(this).parents('ul.tabs__caption')); localStorage.removeItem('tab' + ulIndex); localStorage.setItem('tab' + ulIndex, $(this).index()); }); }); })(jQuery);
Пример табов, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб
Пример табов, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб. HTML и CSS остается тот же, меняется только скрипт.
(function($) { $(function() { $('ul.tabs__caption').on('click', 'li:not(.active)', function() { $(this) .addClass('active').siblings().removeClass('active') .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active'); }); var tabIndex = window.location.hash.replace('#tab','')-1; if (tabIndex != -1) $('ul.tabs__caption li').eq(tabIndex).click(); $('a[href*=#tab]').click(function() { var tabIndex = $(this).attr('href').replace(/(.*)#tab/, '')-1; $('ul.tabs__caption li').eq(tabIndex).click(); }); }); })(jQuery);
Полностью рабочий пример jquery-табов со своими стилями в вертикальном и горизонтальном виде:
See the Pen Jquery Tabs by Denis (@deniscreative) on CodePen.0
Сам скрипт целиком и полностью взят с сайта dimox.name
Комментарии (20) к “Простой jQuery-скрипт для табов (вкладок)”
Evgeniya
Спасибо!
Aleksander
Спасибо большое)
Мари
После перебирания мегатонн говнокода наконец то я нашла НОРМАЛЬНЫЙ легкий корректный код и видит Всевышний, я не люблю плагиат, но я только учусь, а сама так не написала бы. Надеюсь, вы не очень сердитесь. что я его позаимствовала и зверски расковыряла) Но даже это он пережил и позволил реализовать табы в табах. Большое человеческое спасибо.
Alexander
Огромное Вам спасибо! Вы мне сэкономили кучу времени!
Niko
А как сделать так что бы вкладка после обновления страницы оставалась на том же?
Denis Creative
Нужно использовать немного другой скрипт, с использованием localStorage:
Руслан
Привет не подскажете? использую последний код для активации таба после перехода по ссылке с якорем но активируется только 2 таб, не могу понять в чем проблема
Denis Creative
Попробуйте такой HTML:
и такой JS:
Я проверил, вроде бы работает.
OF
Здравствуйте.
Спасибо за материал.
Подскажите, пожалуйста, как дополнительно сделать, чтобы при переходе по ссылке несколько элементов с табами переключались?
Чтобы понятнее было: у меня 5 блоков, в каждом по 3 вкладки. Над ними 3 кнопки. Необходимо, чтобы по нажатию кнопки 1-3, раскрывались табы 1-3.
Вариант с якорем, к сожалению, раскрывает только 1ый элемент.
:))
Почемуто Четвертая вкладка через букву р(Червертая ) :) самое смешное что по ссылке оригинала тоже самое:)
Denis Creative
Ну я не писал этот код с нуля) Спасибо за замечание, исправил.
Георгий
только я хотел позаимствовать ваш вариант табов, но… в мобильной версии, когда из-за маленькой ширины экрана закладки встают друг над другом, чтобы выбрать таб, надо нажимать на 50px ниже, чем его закладка находится :) садитесь, два =(
Denis Creative
1. Скрипт рабочий.
2. Стили для мобильного вы можете написать любые.
3. В примере стили и скрипты упрощены до минимума, чтобы понять логику скрипта.
Если вы не можете поправить стили для мобильного, а только копируете и вставляете код, то вам следует немного подучиться.
Степан
Спасибо за самый рабочий и минималистичный пример!
Но вот такой вопрос: А можно ли при 3-4 вкладках сделать некоторые из них неактивные?
Denis Creative
Это как?.. Можно подробнее?
Степан
Прошу прощения за столь долгий ответ. Проблему я уже решил.
Например, на сайте всегда присутствует несколько разделов (3-4), но на определенных страницах некоторые из разделов не имеют информации, и эти разделы необходимо скрыть, не скрывая кнопки. Решение простое – сделать неактивными сами кнопки (спокойно делается через CSS).
Но вот другой вопрос: на странице есть заголовки, на которые можно перейти в меню разделов. За меню и заголовками закреплены определенные id.
Также на этой странице присутствует несколько вкладок. Как сделать, чтобы меню тоже менялось при смене вкладок?
Просто заметил особенность – скрипты и даже стандартные переходы по разделам не работают уже на 2 вкладке. На 1 все в порядке.
Denis Creative
Добавьте пример на codepen.io – там будет понятнее, какие блоки существуют и как они выглядят, что должно происходить.
Степан
Как я уже говорил, есть разделы, и есть меню, отвечающее за быстрый переход по ним. Скрипт отвечает за плавность этого перехода.
Загвоздка в том, что в моем случае вкладки используются для, практически, одного и того же контента, за исключением некоторых блоков. В пример можно привести сайт с полезным советом для установки чего-либо. Один раздел отводится для Windows, другой для MacOS – чтобы пользователь знал, как действовать на любой из систем. Основные шаги одинаковые, но пути и некоторые действия различаются.
И почему-то никакие скрипты, работающие на 1 вкладке, не хотят работать ни на 2, ни на любой другой вкладке. Поэтому я подумал про смену контента в меню разделов, чтобы заменить id (ведь, скорее всего, для продублированного контента невозможно применить один и тот же скрипт). К слову, в моем проекте контент находится в теге article, а меню разделов – в теге aside.
Поэтому повторю вопрос: как сделать смену контента не только для основного блока, но и какого-нибудь другого на странице?
P.S.
Пока писал, нашел решение для смены меню разделов каждой вкладки. Просто меню вставить внутрь контента, немного поменяв стили… Но проблема с нерабочими скриптами на других вкладках остается актуальной.
Denis Creative
Интересно посмотреть на живой пример.
Denis Creative
Получил пример на почту.
1. На всей странице не должно быть одинаковых id – они уникальны и у каждого элемента должен быть свой id – это важно, из-за это и не работало меню.
2. Нужно проверять консоль в браузере на предмет ошибок, в вашем примере были ошибки в консоли, я убрал часть кода, чтобы упростить и показать пример.
3. Более правильно будет вынести правое меню внутрь каждого таба со своими id и своими ссылками для этих id.
4. Не совсем правильно, но чуть проще по верстке и чуть сложнее по скриптам я выслал код на почту. Там меню боковое остается одно, но при разных активных табах в этом меню подменяются ссылки для каждого активного Таба со своими уникальными ID.