Как сделать табы на jQuery

Вкладки (табы) — элемент крайне востребованный в современном веб-дизайне. Он позволяет разместить большое количество информации в ограниченном пространстве. Каждый уважающий себя верстальщик должен уметь делать табы, и именно этим мы сегодня и займемся.

Призовем на помощь замечательную библиотеку jQuery и сделаем примитивные, но вполне себе работающие табы.

Разметка

Каждая вкладка имеет два элемента — тайтл (название вкладки, интерактивный элемент) и контент. При клике на тайтл соответственно открывается контент. Сделаем тайтлы всех табов одним списком, а контенты — другим. Это самый простой вариант разметки.

<div class="simple-tabs">
    <ul class="tab-title">
        <li>Закладка 1</li>
        <li>Закладка 2</li>
        <li>Закладка 3</li>
        <li>Закладка 4</li>
        <li>Закладка 5</li>
    </ul>

    <ul class="tab-content">
        <li>Контент закладки 1</li>
        <li>Контент закладки 2</li>
        <li>Контент закладки 3</li>
        <li>Контент закладки 4</li>
        <li>Контент закладки 5</li>
    </ul>
</div>

Стили

Стили тут никакой роли не играют, они могут быть любыми. Например, сделаем вот так:

.simple-tabs {
  margin: 30px 0;
  font-family: sans-serif;
  border: 2px solid #eee;
  border-radius: 4px;
  padding: 10px;
}

.simple-tabs .tab-title,
.simple-tabs .tab-content {
  list-style: none;
}

.simple-tabs .tab-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0;
  padding: 15px;
  border-bottom: 2px solid #ccc;
}

.simple-tabs .tab-title li {
  font-size: 14px;
  color: #666;
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
}

.simple-tabs .tab-title li:hover {
  box-shadow: 0 -5px 0px -2px #ccc;
}

.simple-tabs .tab-title li.active {
  color: red;
  box-shadow: 0 -5px 0px -2px red;
}

.simple-tabs .tab-content {
  margin: 0;
}

.simple-tabs .tab-content li {
  text-align: center;
  padding: 5px;
  margin: 10px;
}

Обязательно создаем специальный класс active, чтобы отметить им выделенную вкладку.

.simple-tabs .tab-title li.active{
    color:red;
    box-shadow:0 -5px 0px -2px red;
}

Скрипт

Создание вкладок состоит из решения нескольких задач.

1) Необходимо спрятать контент неактивных вкладок.

Решение: можно изначально присвоить элементам списка tab-content свойство display:none или же сделать это после создания странички с помощью скрипта. В первом случае мы гарантированно не увидим неактивных элементов, во втором может наблюдаться их появление и стремительное исчезновение, так как скрипт начинает работать уже после генерации страницы. Плюс второго решения в том, что при отключенном JavaScript пользователю будет доступно содержимое всех вкладок, в первом же случае они будут скрыты. Пойдем по первому пути, добавим в таблицу стилей правило:

.simple-tabs .tab-content li {
  display:none;
}

2) Необходимо при создании страницы активизировать одну вкладку и вывести ее контент.

Присвоим первому табу класс active и выведем его содержание.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(function(){
    $('.tab-title li:first').addClass('active');
    $('.tab-content li:first').css('display', 'block');
  })
</script>

3) Необходимо по клику переключать вкладки. Создадим для этого обработчик события клика по неактивным табам.

//обработчик кликов по неактивным табам
$('.tab-title li').not('.active').click(function(){
    //номер таба
    var index = $(this).index();
    //соответствующая закладка
    var content = $('.tab-content li').eq(index);
    //таб сделать активным, остальные неактивными
    $(this).addClass('active').siblings().removeClass('active');
    //открыть нужную вкладку, закрыть остальные
    $('.tab-content li').css('display', 'none').eq(index).css('display', 'block');
})

Важно: обработчик клика в коде должен располагаться перед присвоением первому табу активного класса (задача 2), иначе действие обработчика не будет распространяться на первую (уже активную) вкладку.

А вот результат:

Деактивация табов (дополнение)

Активный таб можно деактивировать при нажатии — тогда получится, что контент всех табов может быть скрыт. Для этого достаточно немного изменить скрипт. Во-первых, обработчик можно добавить ко всем табам (не только к неактивным). Во-вторых, добавим проверку на наличие класса active:

$('.tab-title li').click(function(){
    var index = $(this).index();
    var content = $('.tab-content li').eq(index);

    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      content.css('display', 'none');
    } else {
      $(this).addClass('active').siblings().removeClass('active');
      $('.tab-content li').css('display', 'none').eq(index).css('display', 'block');
    }
})