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

Почему  скрипт для jQuery-вкладок назван универсальным:

  • он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов;
  • можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
  • содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,3 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок.
(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);

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 во второй элемент в списке вкладок.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *