Главная JavaScript

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Комментарии (978)

  1. Доброго времени суток
    http://nashe.eu/
    Есть такой сайт.
    Я для новостей мероприятий использовала табы, удобные и простые.
    Но возникла проблема, если я даю вот такую ссылку http://nashe.eu/#splin-3, открывает все время первый :(

  2. Евгений
    8 лет назад

    На всех проектах использую данный код, спасибо большое!)

  3. Аналогично предыдущему автору комментария, использую данный код всегда и везде уже года 4

  4. Так если вкладки и табы создаются migx автоматически, о каком ручном присвоении класса может идти речь? Если они по умолчанию получаются все не активные

  5. Нужно, что бы скрипт по умолчанию первому элементу присваивал активность

  6. Дмитрий, спасибо за скрипт.

    Подскажи, пожалуйста, можно ли сделать так, чтобы на первом табе отображалось содержимое всех табов?

    Хочу сделать табы для портфолио по структуре:

    [Все] [Дизайн] [Программирование] [Копирайтинг]

  7. Спасибо большое за скрипт! Могли бы Вы подсказать, нет ли возможности передавать класс activ именно первому элементу в списке ?

    Использую DLE, там есть несколько полей, в зависимости от того, заполнены они или нет, появляются табы, и допустим есть первый таю с классом activ не выведен, то остальные табы так же нельзя увидеть.

    Проще говоря, как передавать класс activ первому доступному табу ?

  8. Уже писал спасибо автору скрипта, но мне не хватало анимированного перехода между табами, я немножко изменил скрипт вот что вышло. В код js добавлены fadeIn/fadeOut и delay(), для анимации табов, в css изменения минимальны, заменяем класс active на :first-of-type для того чтобы показывался первый таб по умолчанию.

    	$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    		$(this)
    			.addClass('active').siblings().removeClass('active')
    			.closest('div.tabs').find('div.tabs__content').fadeOut(1000).removeClass('active').eq($(this).index()).delay(1000).fadeIn(1000).addClass('active');
    	});
    
    .tabs__content{
        display: none;
    }
    .tabs__content:first-of-type{
        display: block;
    }
    

    Пример в действии можно посмотреть на jsfiddle

  9. Как мне кажется, если изобретать колесо, то колесо адаптивное.
    А то как неловко получается- табы не адаптивные, а весь сайт и в том числе табы “Похожие статьи” и “Рубрики” адаптивные. и если смотришь с телефона, то предлагаемое решение смотрится как костыль.

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

  10. Отличный скрипт, спасибо! Дмитрий, подскажите, а как доработать первый вариант скрипта, чтобы продублировать вкладки (табы) сверху и снизу блока. Например, в мобильном блок очень длинный и чтобы не прокручивать наверх, хочу сделать дубликат вкладок.

  11. огромное,- хотелось сказать денежное спасибо, но к сожелению на твоем ящике отсутствует реквизит “муравейника”, а по чужих ложить знаешь сам очень дорого;- просто огромейше спасибо за код, поставил все работает, а то если самому, да я учу джаваскрипт, то с моимы темпами, это бы произошло как ты и сам прекрасно понимаешь – “с тех пор прошло 2 года”, вот так!

  12. Вместо

    (function($) {
    $(function() {

    Можно написать
    jQuery(function($){

  13. Было бы здорово сделать адаптивность. Например на 480px превращать в аккордион.

  14. Супер! Спасибо вам огромное! Вкладки, создающиеся на лету по ссылкам + запоминание позиции – то, что я искал!

    Скажите, а можно добавить еще возможность закрывать после прочтения ненужные кладки?

    И еще, можно ли как-то прикрутить ко вкладкам какой-то параметр, чтобы на них можно было сослаться и отправить как ссылку ?

    • Скажите, а можно добавить еще возможность закрывать после прочтения ненужные кладки?

      Не понял, как это.

      И еще, можно ли как-то прикрутить ко вкладкам какой-то параметр, чтобы на них можно было сослаться и отправить как ссылку ?

      4-й пример.

  15. Добрый день.

    Спасибо за код. Использую его постоянно.
    Подскажите, как сделать плавное появление табов при переключении?

    Спасибо!

  16. использую код в админке wordpress (в интерфейсе плагина).
    сохраняю открытый таб в localStorage
    к сожалению – видно, что активная первая вкладка – и только потом скрипт переключает на сохраненную.

    нет ли какого способа генерировать html-код с уже правильной активной вкладкой?
    ну чтобы избавиться от видимого прыжка.

  17. Здравствуйте! А можете подсказать, как сделать вкладки внутри каждой вкладки? Я вставляла предлагаемые Вами код в код каждой вкладки. По итогу отображается только первая активная вкладка, остальные не переключаются. Понимаю, что нужно что-то в коде поправить, но не могу догнать,что именно. Помогите, пожалуйста.
    http://dvernik.by/vhodnayadver-k69

  18. Добрый день как отвязать якоря от tab(n), чтобы по ссылке #anchor-name переходило на нужную вкладку с якорем например по ID

  19. Здравствуйте.
    Еще не пробовала ваш скрипт, но хочу сказать по поводу “изобретать колесо”: jquery-ui хорошая штука, но у него есть недостатки. Конкретно табы не имеют отличительного класса “активный-не активный”, только навигация. Из-за этого нельзя влиять на них с помощью CSS, а дизайнеры бывает такое нарисуют или заказчик придумает, что приходится “ломать” стандартную работу скрипта и класс тут очень будет кстати.

    Так что изобретайте и дальше, все пригодится )))

  20. Может быть уже писали не могу найти, как в этом примере вкладок сделать автоматическое переключение между вкладками?

Ваш комментарий