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

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

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Вкладка 1</a></li>
  <li><a href="#">Вкладка 2</a></li>
  <li><a href="#">Вкладка 3</a></li>
</ul>
Bootstrap -  Tabs (вкладки)

Вы можете активировать компонент tab (вкладку) на Bootstrap вообще без написания кода JavaScript. Для этого необходимо на каждый tab (вкадку) добавить атрибут data-toggle="tab" и атрибут href с идентификатором панели, которая будет отображаться при нажатии на этот tab (вкладку). Кроме этого, необходимо для каждой панели добавить атрибуты id="ИдентификаторПанели" и class="tab-pane". После этого все панели необходимо заключить в контейнер div с атрибутом class="tab-content".

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#panel1">Панель 1</a></li>
  <li><a data-toggle="tab" href="#panel2">Панель 2</a></li>
  <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      Другие панели 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#panel3">Панель 3</a></li>
      <li><a data-toggle="tab" href="#panel4">Панель 4</a></li>
    </ul>
  </li>
</ul>

<div class="tab-content">
  <div id="panel1" class="tab-pane fade in active">
    <h3>Панель 1</h3>
    <p>Содержимое 1 панели...</p>
  </div>
  <div id="panel2" class="tab-pane fade">
    <h3>Панель 2</h3>
    <p>Содержимое 2 панели...</p>
  </div>
  <div id="panel3" class="tab-pane fade">
    <h3>Панель 3</h3>
    <p>Содержимое 3 панели...</p>
  </div>
  <div id="panel4" class="tab-pane fade">
    <h3>Панель 4</h3>
    <p>Содержимое 4 панели...</p>
  </div>
</div>
Bootstrap -  Создание динамических вкладок

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

<script>
$(function(){ 
  $("#myTab a").click(function(e){
    e.preventDefault();
    $(this).tab('show');
  });
});
</script>

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#panel1">Панель 1</a></li>
  <li><a href="#panel2">Панель 2</a></li>
  <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      Другие панели 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#panel3">Панель 3</a></li>
      <li><a href="#panel4">Панель 4</a></li>
    </ul>
  </li>
</ul>
 
<div class="tab-content">
  <div id="panel1" class="tab-pane fade in active">
    <h3>Панель 1</h3>
    <p>Содержимое 1 панели...</p>
  </div>
  <div id="panel2" class="tab-pane fade">
    <h3>Панель 2</h3>
    <p>Содержимое 2 панели...</p>
  </div>
  <div id="panel3" class="tab-pane fade">
    <h3>Панель 3</h3>
    <p>Содержимое 3 панели...</p>
  </div>
  <div id="panel4" class="tab-pane fade">
    <h3>Панель 4</h3>
    <p>Содержимое 4 панели...</p>
  </div>
</div>

Ещё один сценарий на языке JavaScript с помощью которого Вы можете активировать вкладки:

<script>
$(function(){ 
    // Отображается 1 вкладка, 
    // т.к. отсчёт начинается с нуля
    $("#myTab2 li:eq(0) a").tab('show');
});
</script>

<ul id="myTab2" class="nav nav-tabs">
  <li><a data-toggle="tab" href="#panely1">Панель 1</a></li>
  <li><a data-toggle="tab" href="#panely2">Панель 2</a></li>
  <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      Другие панели 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#panely3">Панель 3</a></li>
      <li><a data-toggle="tab" href="#panely4">Панель 4</a></li>
    </ul>
  </li>
</ul>
 
<div class="tab-content">
  <div id="panely1" class="tab-pane fade in active">
    <h3>Панель 1</h3>
    <p>Содержимое 1 панели...</p>
  </div>
  <div id="panely2" class="tab-pane fade">
    <h3>Панель 2</h3>
    <p>Содержимое 2 панели...</p>
  </div>
  <div id="panely3" class="tab-pane fade">
    <h3>Панель 3</h3>
    <p>Содержимое 3 панели...</p>
  </div>
  <div id="panely4" class="tab-pane fade">
    <h3>Панель 4</h3>
    <p>Содержимое 4 панели...</p>
  </div>
</div>

Примечание: Активировать вкладки на JavaScript можно также с помощью указания:

  • атрибута для тега <a> (например: $('#myTab a[href="#panel2"]').tab('show'); - активирует вкладку с атрибутом href="#panel2");
  • селектора :first (например: $("#myTab a:first").tab('show'); - активирует первую вкладку);
  • селектора :last (например: $("#myTab a:last").tab('show'); - активирует последнюю вкладку).

Данный метод активирует элемент вкладки (tab) и соответствующее содержимое панели (контейнера). Вкладка должна иметь атрибут data-target или href, который должен содержать значение идентификатора контейнера (панели), связанное с соответствующей вкладкой (tab).

Когда происходит отображение новой вкладки, события возникают в следующем порядке:

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

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

Событие Описание
show.bs.tab Это событие вызывается при отображении (show) вкладки, но перед тем как она будет показана (shown) пользователю. Чтобы обратиться к активной вкладке и предыдущей активной вкладке (если она имеется) используйте event.target и event.relatedTarget соответственно.
Например:
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
// сделать что-нибудь...
})
shown.bs.tab Это событие вызывается, когда вкладка уже показана пользователю. Используйте event.target и event.relatedTarget для указания активной вкладке и предыдущей активной вкладке (если возможно) соответственно.
Например:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// сделать что-нибудь...
})
hide.bs.tab Это событие возникает, когда новая вкладка будет показана (shown) пользователю, а предыдущая активная вкладка будет скрыта (hidden). Чтобы обратиться к активной вкладке и предыдущей активной вкладке (если она имеется) используйте event.target и event.relatedTarget соответственно.
Например:
$('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
// сделать что-нибудь...
})
hidden.bs.tab Это событие срабатывает, когда предыдущая активная вкладка становится скрытой (hidden) для пользователя, а новая вкладка ещё не видима (shown) пользователю. Чтобы обратиться к активной вкладке и предыдущей активной вкладке (если она имеется) используйте event.target и event.relatedTarget соответственно.
Например:
$('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
// сделать что-нибудь...
})

Например: выведем названия активной вкладки и предыдущей активной вкладки пользователю, когда переход с одной вкладки на другую полностью завершён (т.е. когда срабатывает событие shown.bs.tab).

<script>
$(function(){
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
    //Получить название активной вкладки
    var activeTab = $(e.target).text();
    // Получить название предыдущей активной вкладки
    var previousTab = $(e.relatedTarget).text(); 
    $(".tab-active span").html(activeTab);
    $(".tab-previous span").html(previousTab);
  });
});
</script>


<!-- Вкладки (навигация по панелям) -->
<ul class="nav nav-tabs" id="myTabEvents">
  <li class="active"><a class="tabnav" data-toggle="tab" href="#evPanel1">Панель 1</a></li>
  <li><a class="tabnav" data-toggle="tab" href="#evPanel2">Панель 2</a></li>
  <li><a class="tabnav" data-toggle="tab" href="#evPanel3">Панель 3</a></li>
</ul>

<!-- Панели -->
<div class="tab-content" id="myTabContent">
<!-- Панель 1 -->
<div id="evPanel1" class="tab-pane fade in active">
  <!-- Содержимое панели 1 -->
  <h3>Заголовок панели 1</h3>
  <p>Содержимое панели 1...</p>
</div>
<!-- Панель 2 -->
<div id="evPanel2" class="tab-pane fade">
  <!-- Содержимое панели 2 -->
  <h3>Заголовок панели 2</h3>
  <p>Содержимое панели 2...</p>
</div>
<!-- Панель 3 -->
<div id="evPanel3" class="tab-pane fade">
  <!-- Содержимое панели 3 -->
  <h3>Заголовок панели 3</h3>
  <p>Содержимое панели 3...</p>
</div>
    
<hr>
<p class="tab-active"><strong>Активная вкладка</strong>: <span></span></p>
<p class="tab-previous"><strong>Предыдущая активная вкладка</strong>: <span></span></p>
Bootstrap Вкладки -  Пример использования событий