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

Tabs (Вкладки) – это компонент Twitter 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>

Вы можете активировать компонент 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>

Панель 1

Lorem ipsum dolor sit amet. Sapiente delectus, ut aliquid ex ea voluptate velit. Obcaecati cupiditate non recusandae natus error sit voluptatem accusantium doloremque laudantium totam. Vero eos et molestiae non recusandae quae ab illo inventore veritatis. Repudiandae sint et dolorum fuga corporis. Error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa. Iusto odio dignissimos ducimus. Illo inventore veritatis et iusto odio dignissimos ducimus, qui dolorem ipsum.

Панель 2

Lorem ipsum dolor sit amet. Assumenda est, omnis voluptas assumenda est, omnis voluptas assumenda est. Necessitatibus saepe eveniet, ut aut officiis debitis. Accusantium doloremque laudantium, totam rem aperiam. Doloremque laudantium, totam rem aperiam eaque ipsa, quae. Sunt in ea voluptate velit esse, quam nihil molestiae consequatur. Beatae vitae dicta sunt, explicabo temporibus autem quibusdam et expedita. Quod maxime placeat, facere possimus, omnis voluptas nulla vero.
Autem vel eum iure reprehenderit, qui ratione voluptatem sequi nesciunt. Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut perspiciatis unde. Optio, cumque nihil impedit, quo minus id, quod maxime placeat. Corporis suscipit laboriosam, nisi ut aliquid ex ea commodi autem quibusdam. Nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex. Labore et dolore magnam aliquam. Dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium.

Панель 3

Lorem ipsum dolor sit amet. Dolores et molestiae non provident, similique sunt. Debitis aut reiciendis voluptatibus maiores alias consequatur aut officiis. Eos et molestiae non recusandae architecto beatae vitae. Similique sunt in ea commodi autem quibusdam. In culpa, qui in culpa, qui ratione voluptatem sequi nesciunt.

Панель 4

Lorem ipsum dolor sit amet. Cupiditate non numquam eius modi. Sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae. Modi tempora incidunt, ut aliquid ex ea voluptate velit esse. Velit esse, quam nihil molestiae consequatur, vel eum fugiat, quo minus. Quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in.

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

<script type="text/javascript">
$(document).ready(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>

Панель 1

Lorem ipsum dolor sit amet. Sapiente delectus, ut aliquid ex ea voluptate velit. Obcaecati cupiditate non recusandae natus error sit voluptatem accusantium doloremque laudantium totam. Vero eos et molestiae non recusandae quae ab illo inventore veritatis. Repudiandae sint et dolorum fuga corporis. Error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa. Iusto odio dignissimos ducimus. Illo inventore veritatis et iusto odio dignissimos ducimus, qui dolorem ipsum.

Панель 2

Lorem ipsum dolor sit amet. Assumenda est, omnis voluptas assumenda est, omnis voluptas assumenda est. Necessitatibus saepe eveniet, ut aut officiis debitis. Accusantium doloremque laudantium, totam rem aperiam. Doloremque laudantium, totam rem aperiam eaque ipsa, quae. Sunt in ea voluptate velit esse, quam nihil molestiae consequatur. Beatae vitae dicta sunt, explicabo temporibus autem quibusdam et expedita. Quod maxime placeat, facere possimus, omnis voluptas nulla vero. Autem vel eum iure reprehenderit, qui ratione voluptatem sequi nesciunt. Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut perspiciatis unde. Optio, cumque nihil impedit, quo minus id, quod maxime placeat. Corporis suscipit laboriosam, nisi ut aliquid ex ea commodi autem quibusdam. Nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex. Labore et dolore magnam aliquam. Dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium.

Панель 3

Lorem ipsum dolor sit amet. Dolores et molestiae non provident, similique sunt. Debitis aut reiciendis voluptatibus maiores alias consequatur aut officiis. Eos et molestiae non recusandae architecto beatae vitae. Similique sunt in ea commodi autem quibusdam. In culpa, qui in culpa, qui ratione voluptatem sequi nesciunt.

Панель 4

Lorem ipsum dolor sit amet. Cupiditate non numquam eius modi. Sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae. Modi tempora incidunt, ut aliquid ex ea voluptate velit esse. Velit esse, quam nihil molestiae consequatur, vel eum fugiat, quo minus. Quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in.

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

<script type="text/javascript">
$(document).ready(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>

Панель 1

Lorem ipsum dolor sit amet. Sapiente delectus, ut aliquid ex ea voluptate velit. Obcaecati cupiditate non recusandae natus error sit voluptatem accusantium doloremque laudantium totam. Vero eos et molestiae non recusandae quae ab illo inventore veritatis. Repudiandae sint et dolorum fuga corporis. Error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa. Iusto odio dignissimos ducimus. Illo inventore veritatis et iusto odio dignissimos ducimus, qui dolorem ipsum.

Панель 2

Lorem ipsum dolor sit amet. Assumenda est, omnis voluptas assumenda est, omnis voluptas assumenda est. Necessitatibus saepe eveniet, ut aut officiis debitis. Accusantium doloremque laudantium, totam rem aperiam. Doloremque laudantium, totam rem aperiam eaque ipsa, quae. Sunt in ea voluptate velit esse, quam nihil molestiae consequatur. Beatae vitae dicta sunt, explicabo temporibus autem quibusdam et expedita. Quod maxime placeat, facere possimus, omnis voluptas nulla vero. Autem vel eum iure reprehenderit, qui ratione voluptatem sequi nesciunt. Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut perspiciatis unde. Optio, cumque nihil impedit, quo minus id, quod maxime placeat. Corporis suscipit laboriosam, nisi ut aliquid ex ea commodi autem quibusdam. Nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex. Labore et dolore magnam aliquam. Dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium.

Панель 3

Lorem ipsum dolor sit amet. Dolores et molestiae non provident, similique sunt. Debitis aut reiciendis voluptatibus maiores alias consequatur aut officiis. Eos et molestiae non recusandae architecto beatae vitae. Similique sunt in ea commodi autem quibusdam. In culpa, qui in culpa, qui ratione voluptatem sequi nesciunt.

Панель 4

Lorem ipsum dolor sit amet. Cupiditate non numquam eius modi. Sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae. Modi tempora incidunt, ut aliquid ex ea voluptate velit esse. Velit esse, quam nihil molestiae consequatur, vel eum fugiat, quo minus. Quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in.

Примечание: Активировать вкладки на 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 type="text/javascript">
$(document).ready(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>

Заголовок панели 1

Содержимое панели 1...

Заголовок панели 2

Содержимое панели 2...

Заголовок панели 3

Содержимое панели 3...


Активная вкладка:

Предыдущая активная вкладка: