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

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

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

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

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

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

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

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

  6. Михаил
    3 года назад

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

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

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

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

  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. Татьяна
    1 год назад

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

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

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

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