Универсальный jQuery-скрипт для блоков с вкладками (табами)
Вступление
Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге.
С тех пор прошло 2 года, я набрался определенного опыта в работе с jQuery, и вышеуказанный скрипт превратился в абсолютно новый скрипт, написанный мною полностью с нуля. Перед этим был еще один вариант данного скрипта, которым я пользовался, наверное, год. О нем я нигде не писал, да и сейчас уже нет смысла это делать, т.к. он потерял свою актуальность.
Почему я называю свой новый скрипт для jQuery-вкладок универсальным:
- он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
- можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
- содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,3 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.
Что ж, хватит сухих слов, переходим к сути.
Код jQuery-скрипта для переключаемых блоков с вкладками
Не забывайте в первую очередь подключить сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами <head> и </head>):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>Я предпочитаю “брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во-вторых, скорость серверов Гугла стабильна и быстра, в-третьих, Гугл отдает его в сжатом виде (gzip), и, например, для версии 1.4.2 размер составляет всего 24 килобайта по сравнению с несжатым файлом (70 Кб).
Вот такой у меня получился скрипт:
(function($) {
$(function() {
$('ul.tabs').each(function() {
$(this).find('li').each(function(i) {
$(this).click(function(){
$(this).addClass('active').siblings().removeClass('active')
.parents('div.tabs').find('div.tabs__content').eq(i).fadeIn(150).siblings('div.tabs__content').hide();
});
});
});
})
})(jQuery)
Добавлено 07.03.2010 (обновлено 09.04.2015)
В комментариях подсказали еще более сокращенный вариант этого скрипта (обратите внимание, что для него нужно использовать jQuery не ниже версии 1.7):
(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)
Для тех, кто еще не знает, как подключать этот скрипт – создать файл с расширением .js, вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.
Скачать
Универсальный jQuery-скрипт для блоков с вкладками
Загрузок: 27117 | Размер: 15 Кб
Если вы желаете отблагодарить автора финансово, воспользуйтесь следующей формой, указав произвольную сумму рублей:
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 -->
Обратите внимание, что структура HTML-кода строго привязана к скрипту, поэтому, если вы пожелаете изменить названия используемых классов, не забывайте их поменять и в скрипте.
Обязательные CSS-стили для вышеуказанного HTML-кода
.tabs__content {
display: none; /* по умолчанию прячем все блоки */
}
.tabs__content.active {
display: block; /* по умолчанию показываем нужный блок */
}
Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .active во второй блок div.tabs__content, а также переместить класс .active во второй элемент в списке вкладок.
Примеры
- 1-й пример.
- 2-й пример, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie).
- 3-й пример, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie).
- 4-й пример, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб.
P.S. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я “изобрел колесо”, главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)
* * *
Требуется разработка печатного каталога товаров или услуг? Создание каталога в студии «Верстаем.ru» это оптимальное решение!
Смотрите также
Создаем удобные, практичные вкладки с помощью jQuery
Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью “Универсальный jQuery-скрипт для блоков с вкладками (табами)“. * * * Примерно последние месяц-два на англоязычных блогах мне стали ...
Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...
Добавляем кнопку "Google +1" в панель от Share42.com
На своем другом блоге я недавно объяснил, почему в данный момент кнопка “Google +1” не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на ...
Красивые всплывающие подсказки с помощью jQuery
Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...
Комментарии (978)
Дмитрий, спасибо за скрипт.
Подскажи, пожалуйста, можно ли сделать так, чтобы на первом табе отображалось содержимое всех табов?
Хочу сделать табы для портфолио по структуре:
[Все] [Дизайн] [Программирование] [Копирайтинг]
Такое скрипт не предусматривает.
Спасибо большое за скрипт! Могли бы Вы подсказать, нет ли возможности передавать класс activ именно первому элементу в списке ?
Использую DLE, там есть несколько полей, в зависимости от того, заполнены они или нет, появляются табы, и допустим есть первый таю с классом activ не выведен, то остальные табы так же нельзя увидеть.
Проще говоря, как передавать класс activ первому доступному табу ?
После строк:
добавьте:
Спасибо Вам большое! Как можно поддержать Ваш проект средствами ?
Пожалуйста. Добавил в статью форму доната под блоком “Скачать”.
Отправил немного, спасибо еще раз за помощь!
P.s – не подскажете в какую сторону копать, если нужно при переключении табов, вырубать встроенный iframe в таб, в том случа если это Media, Допустим Iframe с ютуба ?
Просто если в разных табах несколько разных iframe вк или ютуб, при включании одного из них и при переходе на другой, пользователь может включить два плеера одновременно.
Понимаю что это уже не к Вам, но возможно с Вашим опытом можно что то подсказать.
С подобным не сталкивался, к сожалению.
А за что спасибо, когда вкладку li не становится активной. И вообще этот копирайт зачем тут размещать да ещё и так дурно. Пишите свой.
Уже писал спасибо автору скрипта, но мне не хватало анимированного перехода между табами, я немножко изменил скрипт вот что вышло. В код js добавлены fadeIn/fadeOut и delay(), для анимации табов, в css изменения минимальны, заменяем класс active на :first-of-type для того чтобы показывался первый таб по умолчанию.
Пример в действии можно посмотреть на jsfiddle
СПАСИБО!
Как мне кажется, если изобретать колесо, то колесо адаптивное.
А то как неловко получается- табы не адаптивные, а весь сайт и в том числе табы “Похожие статьи” и “Рубрики” адаптивные. и если смотришь с телефона, то предлагаемое решение смотрится как костыль.
Не настаиваю, но куда лучше было бы сделать на примере того, что встроено в блог, но написать самому с нуля и вырезать лишний код.
Отличный скрипт, спасибо! Дмитрий, подскажите, а как доработать первый вариант скрипта, чтобы продублировать вкладки (табы) сверху и снизу блока. Например, в мобильном блок очень длинный и чтобы не прокручивать наверх, хочу сделать дубликат вкладок.
огромное,- хотелось сказать денежное спасибо, но к сожелению на твоем ящике отсутствует реквизит “муравейника”, а по чужих ложить знаешь сам очень дорого;- просто огромейше спасибо за код, поставил все работает, а то если самому, да я учу джаваскрипт, то с моимы темпами, это бы произошло как ты и сам прекрасно понимаешь – “с тех пор прошло 2 года”, вот так!
Вместо
(function($) {
$(function() {
Можно написать
jQuery(function($){
Было бы здорово сделать адаптивность. Например на 480px превращать в аккордион.
Супер! Спасибо вам огромное! Вкладки, создающиеся на лету по ссылкам + запоминание позиции – то, что я искал!
Скажите, а можно добавить еще возможность закрывать после прочтения ненужные кладки?
И еще, можно ли как-то прикрутить ко вкладкам какой-то параметр, чтобы на них можно было сослаться и отправить как ссылку ?
Не понял, как это.
4-й пример.
Добрый день.
Спасибо за код. Использую его постоянно.
Подскажите, как сделать плавное появление табов при переключении?
Спасибо!
Спасибо. Нашел нужный код чуть выше.
использую код в админке wordpress (в интерфейсе плагина).
сохраняю открытый таб в localStorage
к сожалению – видно, что активная первая вкладка – и только потом скрипт переключает на сохраненную.
нет ли какого способа генерировать html-код с уже правильной активной вкладкой?
ну чтобы избавиться от видимого прыжка.
Вряд что-то с этим можно сделать, потому что в админке WordPress подключается много разных скриптов, и все это долго обрабатывается.
Здравствуйте! А можете подсказать, как сделать вкладки внутри каждой вкладки? Я вставляла предлагаемые Вами код в код каждой вкладки. По итогу отображается только первая активная вкладка, остальные не переключаются. Понимаю, что нужно что-то в коде поправить, но не могу догнать,что именно. Помогите, пожалуйста.
http://dvernik.by/vhodnayadver-k69
Решение здесь.
Спасибо огромное! Вы круты!
Добрый день как отвязать якоря от tab(n), чтобы по ссылке #anchor-name переходило на нужную вкладку с якорем например по ID
Здравствуйте.
Еще не пробовала ваш скрипт, но хочу сказать по поводу “изобретать колесо”: jquery-ui хорошая штука, но у него есть недостатки. Конкретно табы не имеют отличительного класса “активный-не активный”, только навигация. Из-за этого нельзя влиять на них с помощью CSS, а дизайнеры бывает такое нарисуют или заказчик придумает, что приходится “ломать” стандартную работу скрипта и класс тут очень будет кстати.
Так что изобретайте и дальше, все пригодится )))
Может быть уже писали не могу найти, как в этом примере вкладок сделать автоматическое переключение между вкладками?
Адаптивные вкладки с трансформацией в аккордеон, кому интересно: https://github.com/WahaWaher/flextabs-js
Спасибо! Очень круто работает. Переделал для трех вкладок, ничего лучше быть не может! Просто добавил поля в html. Прекрасно)
на новой jquery стало ругаться на
это про 4-ый вариант скрипта
Нужно заменить
на
Спасибо!
Доброго времени суток! Почему ваш код не работает в IE11 :(
Проверяла открыв ссылку первого примера в нем
https://dimox.name/examples/universal-jquery-tabs-script/
Не подскажите почему так? :(
Исправил.
Спасибо ^_^
А из-за чего этот глюк был?)
Переносил сайт с http на https, но протокол был не везде изменен.
Огромная благодарность за скрипт!