Bootstrap підтримує будь-яку кількість вкладок, в тому числі і випадне меню. Вкладені вкладки не підтримуються.

Як користуватися?

Кожен набір вкладок потрібно активувати через JavaScript таким чином:

$('#my-tabs a').click(function (e) {
 e.preventDefault()
 $(this).tab('show')
})

Щоб показати певну вкладку, користуйтеся таким методом:

$('#my-tabs a[href="#life"]').tab('show') //селектор за іменем
$('#my-tabs a:first').tab('show') //вибір першої вкладки
$('#my-tabs a:last').tab('show') //остання вкладка
$('#my-tabs li:eq(2) a').tab('show') //вибір вкладки за номером

Зверніть увагу на останній рядок коду: нумерація вкладок починається з нуля, тому третя вкладка матиме індекс 2.

Налаштування

Класи .nav і .nav-tabs, які додаються до елементу списку ul, додають йому стилі вкладок Bootstrap. А класи .nav і .nav-pills використовують стилі кнопок.

Простий приклад: 

<div>
 <!-- Навігація -->
 <ul class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Головна</a></li>
 <li><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Профіль</a></li>
 <li><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Повідомлення</a></li>
 <li><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Налаштування</a></li>
 </ul>
 <!-- Вміст вкладок -->
 <div class="tab-content">
 <div role="tabpanel" class="tab-pane active" id="home">
 Сторінка №1
 </div>
 <div role="tabpanel" class="tab-pane" id="profile">
 Сторінка №2
 </div>
 <div role="tabpanel" class="tab-pane" id="messages">
 Сторінка №3
 </div>
 <div role="tabpanel" class="tab-pane" id="settings">
 Сторінка №4
 </div>
 </div>
</div>

Плавна зміна вкладок

Щоб вкладки змінювалися не миттево, а плавно, додайте клас .fade до кожного елементу з класом .tab-pane. Перша вкладка повинна мати також клас .in, щоб її вміст був видимим при завантаженні сторінки.

<div class="tab-content">
 <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
 <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
 <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
 <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Методи

$().Tab

Активує вкладку і контейнер для вмісту. Вкладка повинна мати або атрибут data-target, або href, який би вказував на селектор контейнера на сторінці. У прикладі вище всі вкладки зроблені за допомогою посилань <a> з атрибутами data-toggle = "tab".

.tab('show')

Змінює вкладку на зазначену і відображає її вміст. Будь-які інші вкладки стають неактивними, а їх вміст ховається.

$('#tab-01').tab('show')

Події

Часто буває необхідним виконувати ті чи інші дії за зміною вкладок. У цьому нам допомагають їх події. При показі нової вкладки, події відбуваються в такому порядку:

• hide.bs.tab - на поточній вкладці
• show.bs.tab - на тій, яка повинна відобразитися
• hidden.bs.tab - на тій самій вкладці, що і hide.bs.tab
• shown.bs.tab - на тільки-но показаній вкладці, тії, що у події show.bs.tab

Якщо до цього жодна з вкладок не була активна, то події hide.bs.tab і hidden.bs.tab не відбудуться.

Опис подій:

Приклад події:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
 e.target // вкладка, яка стала активною
 e.relatedTarget // попередня активна вкладка
})

Перелік усіх уроків