Простой jQuery-скрипт для табов (вкладок)

13.07.2017
Hosting CityHost

Сам скрипт целиком и полностью взят с сайта dimox.name

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-->

Обязательные 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

(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);

Полностью рабочий пример со своими стилями в вертикальном и горизонтальном виде:

See the Pen Jquery Tabs by Denis (@deniscreative) on CodePen.0

TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

Полезная инфа:

Комментарии (3) к “Простой jQuery-скрипт для табов (вкладок)”

  • Evgeniya

    Спасибо!

    Ответить
  • Aleksander

    Спасибо большое)

    Ответить
  • Мари

    После перебирания мегатонн говнокода наконец то я нашла НОРМАЛЬНЫЙ легкий корректный код и видит Всевышний, я не люблю плагиат, но я только учусь, а сама так не написала бы. Надеюсь, вы не очень сердитесь. что я его позаимствовала и зверски расковыряла) Но даже это он пережил и позволил реализовать табы в табах. Большое человеческое спасибо.

    Ответить

Оставить комментарий