Простая реализация табов на jQuery

Сегодня мы рассмотрим самый простой способ сделать табы (tabs) на jQuery.

Скрипт табов на jQuery

Комплексный доработанный скрипт табов, включающий HTML, CSS, JS:

<!-- HTML -->
<div class="tabs-wrapper">
  <div class="tabs">
    <span class="tab">Вкладка 1</span>
    <span class="tab">Вкладка 2</span>
    <span class="tab">Вкладка 3</span>
  </div>
  <div class="tabs-content">
    <div class="tab-item">Содержимое 1</div>
    <div class="tab-item">Содержимое 2</div>
    <div class="tab-item">Содержимое 3</div>
  </div>
</div>

/* CSS */
.tabs-wrapper .active { color: red; }

// jQuery
$('.tabs-wrapper').each(function() {
  let ths = $(this);
  ths.find('.tab-item').not(':first').hide();
  ths.find('.tab').click(function() {
    ths.find('.tab').removeClass('active').eq($(this).index()).addClass('active');
    ths.find('.tab-item').hide().eq($(this).index()).fadeIn()
  }).eq(0).addClass('active');
});

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих

Я - фрилансер! Базовый курс для начинающих

Простая реализация табов на jQuery

Скрипт табов на jQuery

Премиум уроки от WebDesign Master

Другие уроки по теме «Веб-разработка»