Кажется, впервые табы использовали на Amazon в 1995 году и с тех пор так или иначе табы встречаются в повседневной жизни любого пользователя интернетов. До появления Bootstrap создавать табы было не то, чтобы сложно, но довольно затратно по времени. Теперь, чтобы создать динамическую навигацию на табах, достаточно осилить этот урок. Поехали!

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.

Настройка

Вы можете обойтись без JS: для того, чтобы табы начали работать, достаточно добавить атрибут data-toggle="tab" или data-toggle="pill" элементам. Смотрите пример, чтобы стало понятнее.

Классы .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">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</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')

События

Часто бывает необходимым выполнять те или иные действия по смене вкладок. В этом нам помогают их события. При показе новой вкладки события происходят в таком порядке:

  1. hide.bs.tab — на текущей вкладке
  2. show.bs.tab — на той, которая должна отобразиться
  3. hidden.bs.tab — на той же вкладке, что и hide.bs.tab
  4. shown.bs.tab — на только что показанной вкладке, той же, что в событии show.bs.tab

Если до этого ни одна из вкладок не была активна, то события hide.bs.tab и hidden.bs.tab не произойдут.

Описание событий

СобытиеОписание
show.bs.tabСобытие происходит при показе вкладки, но до того, как она становится видимой. Переменные event.target и event.relatedTarget указывают на активную вкладку и на ту, которая была активна ранее (если таковая имеется).
shown.bs.tabАналогично первому событию, это срабатывает при показе вкладки, но уже после того, как она полностью становится видимой. Переменные event.target и event.relatedTarget указывают на активную вкладку и на предыдущую активную.
hide.bs.tabСрабатывает перед показом новой вкладки (и перед скрытием предыдущей активной). event.target и event.relatedTarget укажут на текущую активную вкладку и ту, которая скоро станет активной.
hidden.bs.tabСрабатывает после того, как новая вкладка стала активной, а предыдущая активная стала скрытой. event.target и event.relatedTarget содержат ссылки на предыдущую активную и текущую активную вкладки.

Пример события

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // вкладка, которая стала активной
  e.relatedTarget // предыдущая активная вкладка
})
Поширити у Фейсбуці
Надіслати у Messenger
Зберегти в Pocket
Надіслати в Telegram
Надіслати у WhatsApp

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

3 коментаря

спочатку нові
за рейтингом спочатку нові за хронологією

Спасибо, Назар!
Нашел Ваши уроки - прочел на одном дыхании.
Снимаю шляпу...

Дети прыгали, хлопали в ладоши и кричали: Ещё! Ещё!..

Каникулы Бонифация

Большое спасибо! :) Будут ещё уроки по BS?

Автор
Назар Токар

Да, там немного осталось, но самых сложных.