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

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