На этом уроке Вы научитесь создавать динамические вкладки (tabs) с помощью Bootstrap.

Tabs и основные сведения об вкладках

Tabs – это компонент фреймворка Bootstrap, который предназначен для создания вкладок.

Вкладка – это элемент интерфейса, который состоит из 2 частей: самих вкладок и определённого контента, связанного с каждой из них.

Интерфейс табов в Bootstrap

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

Применение вкладок на страницах позволяют улучшить организацию данных и внешний вид сайта. Их основное преимущество заключается в том, что они занимают намного меньше места, чем если бы весь этот контент был просто расположен на странице. При этом доступ к информации остаётся простым и понятным.

Создание вкладок на фреймворке Bootstrap

Создание вкладок в Bootstrap 4 начинается с создания самих вкладок.

Для этого необходимо создать список ul с классами nav и nav-tabs. После этого в ul нужно поместить определённое количество элементов li с классом nav-item. Их количество должно соответствовать количеству вкладок, которые мы хотим создать.

<ul class="nav nav-tabs">
  <li class="nav-item"></li>
  <li class="nav-item"></li>
</ul>

Затем в каждый элемент li необходимо вложить ссылку с классом nav-link, атрибутом data-toggle="tab" и href. В href следует указать ссылку на блок, который она будет показывать (связан с ней). Содержимое элемента a будет являться названием вкладки. Кроме этого, к одной из ссылок следует добавить класс active. Этот класс будет определять вкладку, которая должна быть выделенной (активной) по умолчанию.

<ul class="nav nav-tabs">
  <!-- Первая вкладка (активная) -->
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#description">Описание</a>
  </li>
  <!-- Вторая вкладка -->
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  ...
</ul>

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

Для этого нужно создать элемент с классом tab-content. Он будет являться контейнером. В нём необходимо создать блоки div с классом tab-pane и атрибутом id. Значение id должно определять вкладку, связанную с этим блоком. К блоку, содержимое которого необходимо отображать по умолчанию, необходимо добавить классы show и active. При желании к блокам также можно добавить класс fade. Это подключит к ним анимацию и сделает их переключение более плавным.

<!-- Сами вкладки -->  
<ul class="nav nav-tabs">...</ul>
<!-- Блоки с контентом -->  
<div class="tab-content">
  <!-- Первый блок (он отображается по умолчанию, т.к. имеет классы show и active) -->  
  <div class="tab-pane fade show active" id="description">...</div>
  <!-- Второй блок -->  
  <div class="tab-pane fade" id="characteristics">...</div>
  ...
</div>  

После этого в каждый из этих блоков следует поместить определённый контент, который нужно будет отображать при активности той или иной вкладки.

В итоге:

Вид табов в Bootstrap 4
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#description">Описание</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#opinion">Отзывы</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="description">
    Описание товара...
  </div>
  <div class="tab-pane fade" id="characteristics">
    Характеристики товара...
  </div>
  <div class="tab-pane fade" id="opinion">
    Отзывы...
  </div>
</div>

В Bootstrap 3 HTML-разметка и вид вкладок немного отличается от 4 версии. Пример, приведённый выше, в Bootstrap 3 будет выглядеть следующим образом:

<ul class="nav nav-tabs">
  <li class="active">
    <a data-toggle="tab" href="#description">Описание</a>
  </li>
  <li>
    <a data-toggle="tab" href="#characteristics">Характеристики</a>
  </li>
  <li>
    <a data-toggle="tab" href="#opinion">Отзывы</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="description">
    Описание товара...
  </div>
  <div class="tab-pane" id="characteristics">
    Характеристики товара...
  </div>
  <div class="tab-pane" id="opinion">
    Отзывы...
  </div>
</div>

В этих примерах активирование компонента Tabs (логики на JavaScript, применительно к этим элементам) выполнялось с помощью атрибута data-toggle="tab".

А определение того, какая вкладка какой контент должна показывать устанавливалась посредством атрибута href для самой вкладки и id для блока с контентом.

Как в Bootstrap 4 осуществляется связывание вкладки с контентом, который должен отображаться когда она активна

Включение табов c помощью JavaScript

Активировать табы можно не только посредством атрибута data-toggle="tab", но и с помощью написания кода на JavaScript.

В этом случае добавлять к ссылкам атрибут data-toggle="tab" не нужно.

Отображение вкладки в этом случае будет выполняется посредством вызова метода tab('show'). Этот метод нужно будет вызывать для соответствующей вкладки (ссылки) каждый раз, когда пользователь нажмёт на неё.

Это, например, можно реализовать посредством добавления следующего скрипта на страницу:

<ul class="nav nav-tabs" id="product">...</ul>
<div class="tab-content">...</div>

<script>
  // #product a – селектор, выбирающий элементы a в #product (вкладки, при клике на которые нужно отображать соответствующий блок)
  $('#product a').click(function(e){
    e.preventDefault();
    $(this).tab('show');
  });
</script>

При необходимости метод tab('show') вы можете использовать также, когда вам необходимо программно переключить вкладку.

Примеры:

// переключиться на tab по значению атрибута href
$('#product a[href="#profile"]').tab('show');
// переключиться на первый tab
$('#product li:first-child a').tab('show');
// переключиться на последний tab
$('#product li:last-child a').tab('show');
// переключиться на 2 tab
$('#product li:nth-child(2) a').tab('show');  

События компонента Tabs

При открытии и переключении вкладок данный компонент генерирует определённые виды событий.

Всего их 4 и генерируются они в следующем порядке (при переключении вкладок):

  • hide.bs.tab – перед скрытием текущей активной вкладки, которая через некоторое время будет не активной;
  • show.bs.tab – перед отображением вкладки, которая через некоторое время будет активной;
  • hidden.bs.tab – после скрытия предыдущей активной вкладки (т.е. той, которая была в событии hide.bs.tab);
  • shown.bs.tab – после отображения новой активной вкладки, которая сейчас будет отображаться пользователю.

Если ни одна из вкладок (tab) ещё не была активной, то события hide.bs.tab и hidden.bs.tab генерироваться не будут.

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

Пример, в котором показано работа с событиями компонента Tabs:

// обработка события show.bs.tab
$('[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var
    activeTab = $(e.target), // активная вкладка
    previousTab = $(e.relatedTarget); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки  
  console.log(previousTab.text());  
});
// обработка события shown.bs.tab
$('[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var
    activeTab = $(e.target), // активная вкладка
    previousTab = $(e.relatedTarget); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки  
  console.log(previousTab.text());  
});
// обработка события hide.bs.tab
$('[data-toggle="tab"]').on('hide.bs.tab', function (e) {
  var
    activeTab = $(e.relatedTarget), // активная вкладка
    previousTab = $(e.target); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки  
  console.log(previousTab.text());
});
// обработка события hidden.bs.tab
$('[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
  var
    activeTab = $(e.relatedTarget), // активная вкладка
    previousTab = $(e.target); // предыдущая вкладка, которая до этого была активной
  // выведем в консоль название активной вкладки
  console.log(activeTab.text());
  // выведем в консоль название предыдущей вкладки  
  console.log(previousTab.text());
});
Bootstrap - Работа с событиями табов

Дополнительные материалы

В этом разделе представлена следующая информация:

Табы, вкладки которых имеют выпадающее меню

В Bootstrap к вкладкам при необходимости можно добавить выпадающее меню. Кроме этого, если некоторые вкладки нужно сделать не активными, то к ним можно добавить класс disabled.

<ul class="nav nav-tabs">
  <!-- Обычная вкладка -->
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  ...
  <!-- Вкладка с выпадающим списком -->
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
      aria-expanded="false">Дополнительно</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#reviews">Обзоры</a>
      <a class="dropdown-item" href="#question-answer">Вопрос-Ответ</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#comments">Комментарии</a>
    </div>
  </li>
  <!-- Вкладка в состоянии disabled -->
  <li class="nav-item">
    <a class="nav-link disabled" href="#istructions-and-files" tabindex="-1" aria-disabled="true">Инструкции и
      файлы</a>
  </li>
  ...
</ul>

<div class="tab-content">...</div>
Bootstrap -  Создание динамических вкладок

Добавление aria-атрибутов в разметку

Если вы хотите сделать сайт более доступным для людей с ограниченными возможностями, то данную разметку следует дополнить aria-атрибутами.

Эти атрибуты предназначены для специальных приложений, например экранных дикторов, с помощью которых пользователи прослушивают страницы.

Для этого к вкладкам необходимо добавить role="tablist", role="tab", role="tabpanel" и дополнительные aria-атрибуты с помощью которых передать пользователям специальных приложений структуру, функциональность и текущее состояния табов.

<!-- Табы с aria-атрибутами в Bootstrap 4 -->  
<ul class="nav nav-tabs" id="product" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="characteristics-tab" data-toggle="tab" href="#characteristics" role="tab" aria-controls="characteristics" aria-selected="false">Характеристики</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="opinion-tab" data-toggle="tab" href="#opinion" role="tab" aria-controls="opinion" aria-selected="false">Отзывы</a>
  </li>
</ul>
<div class="tab-content" id="product-content">
  <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">...</div>
  <div class="tab-pane fade" id="characteristicse" role="tabpanel" aria-labelledby="characteristics-tab">...</div>
  <div class="tab-pane fade" id="opinion" role="tabpanel" aria-labelledby="opinion-tab">...</div>
</div>