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

1. Разметка

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

<div class="container">
    <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>

2. Стили

Стили тут никакой роли не играют, они могут быть любыми. У меня вот так:

  • Закладка 1
  • Закладка 2
  • Закладка 3
  • Закладка 4
  • Закладка 5
  • Контент закладки 1
  • Контент закладки 2
  • Контент закладки 3
  • Контент закладки 4
  • Контент закладки 5

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

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

3.Скрипт

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

1) Необходимо спрятать контент неактивных вкладок.
Решение: можно изначально присвоить элементам списка tab-content свойство display:none или же сделать это после создания странички с помощью скрипта. В первом случае мы гарантированно не увидим неактивных элементов, во втором может наблюдаться их появление и стремительное исчезновение, так как скрипт начинает работать уже после генерации страницы. Плюс второго решения в том, что при отключенном JavaScript пользователю будет доступно содержимое всех вкладок, в первом же случае они будут скрыты. Пойдем по первому пути, добавим в таблицу стилей правило .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), иначе действие обработчика не будет распространяться на первую (уже активную) вкладку.

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


Вам будет интересно

Простые табы на jQuery

3 комментария

  • Маша
    Маша
    30/09/2019, 09:22
    В этой строке: "Пойдем по первому пути, добавим в таблицу стилей правило .tab-title li{display:none;}" опечатка. Надо скрывать контент вкладок, а не закладок: ".tab-content li{display:none;}". Чуть ниже в окончательном примере кода все записано правильно, обратите внимание. Автору огромное спасибо за материал, из всех прочитанных мне пригодился именно этот!
    • Furry_web
      Furry_web
      28/12/2019, 06:41
      Спасибо за внимательность :) Поправила
  • ВАлерий
    ВАлерий
    7/07/2019, 15:49
    Подскажите как при первом открытии табы сделать все не активными. И чтобы при нажатии на активный таб он становился не активным.

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

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован