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

HTML
13.07.2017

Сам скрипт целиком и полностью взят с сайта 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

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

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

  • Evgeniya

    Спасибо!

    Ответить

  • Aleksander

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

    Ответить

  • Мари

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

    Ответить

  • Alexander

    Огромное Вам спасибо! Вы мне сэкономили кучу времени!

    Ответить

  • Niko

    А как сделать так что бы вкладка после обновления страницы оставалась на том же?

    Ответить

    • Denis Creative

      Нужно использовать немного другой скрипт, с использованием localStorage:

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

    $('ul.tabs__caption').each(function(i) {
      var storage = localStorage.getItem('tab' + i);
      if (storage) {
        $(this).find('li').removeClass('active').eq(storage).addClass('active')
        .closest('div.tabs').find('div.tabs__content').removeClass('active').eq(storage).addClass('active');
      }
    });

    $('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');
      var ulIndex = $('ul.tabs__caption').index($(this).parents('ul.tabs__caption'));
      localStorage.removeItem('tab' + ulIndex);
      localStorage.setItem('tab' + ulIndex, $(this).index());
    });

  });
})(jQuery);
      Ответить

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