Cмотреть на GitHub

Навигация в Bootstrap имеет общую для подобного типа элементов разметку, от базового класса .nav до активных и «выключенных» состояний. Заменяйте классы-модификаторы для переключения между стилями.

Базовый компонент класса .nav создан на флексбоксе, что обеспечивает хорошую базу для создания всех типов навигационных компонентов. В него входят несколько стилей, которые «перебивают» остальные (для работы со списками), добавлены паддинги ссылок для увеличения «зоны клика», и базовые стили «выключенных» состояний.

В базовый компонент класса .nav не включено какое-либо состояние .active. Следующие примеры включают класс, главным образом для демонстрации, что данный конкретный класс не подключает какие-либо специальные стили.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Классы используются повсюду, поэтому Ваша разметка может быть очень гибкой. Используйте <ul>, как указано выше, <ol>, если порядок Ваших элементов важен, или сверните свой собственный с элементом <nav>. Поскольку в .nav используется display: flex, навигационные ссылки ведут себя так же, как элементы навигации, но без дополнительной разметки.

<nav class="nav">
  <a class="nav-link active" href="#">Активная</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

Доступные стили

Изменяйте стиль компонентов .nav классами-модификаторами и обычными классами. Смешивайте их и настраивайте как надо, или создайте свои.

Горизонтальное выравнивание

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

Выравнивание по центру с помощью класса .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

По правому краю классом .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Вертикально

Располагайте вашу навигацию по вертикали, изменяя направление элемента flex классом .flex-column. Надо расположить ее вертикально лишь на некоторых брейкпойнтах? Используйте отзывчивые версии (например .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Как всегда, вертикальная навигация возможна и без <ul>.

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Активная</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

Вкладки

«Забирает» базовый элемент навигации с верха и добавляет класс .nav-tabs для создания «вкладочного» интерфейса, Используйте их для создания зоны с поддержкой содержимого в виде вкладок с плагином JavaScript.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Подушки

На том же коде HTML, но с используйте класс .nav-pills:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Наполняйте и выравнивайте по центру

Заставьте содержимое вашего .nav расширяться на полную доступную ширину с помощью одного-двух классов-модификаторов. Для пропорционального заполнения всего доступного пространства элементами класса .nav-item, используйте класс nav-fill. Заметьте, что всё горизонтальное место занято, но не каждый элемент навигационной панели имеет одинаковую ширину.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Гораздо более длинная навигационная ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Используя навигацию на основе <nav>, удостоверьтесь, что включаете .nav-item в ссылки.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" href="#">Активная</a>
  <a class="nav-link" href="#">Гораздо более длинная навигационная ссылка</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

Для создания элементов равной ширины используйте класс .nav-justified. Всё горизонтальное пространство будет занято ссылками навигационной панели, но, в отличие от примера с .nav-fill выше, каждый элемент навигационной панели будет одинаковой ширины.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Гораздо более длинная навигационная ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

По аналогии с примером с .nav-fill, где использована навигация на основе <nav>, удостоверьтесь, что включили класс .nav-item в ссылки.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Активная</a>
  <a class="nav-link" href="#">Гораздо более длинная навигационная ссылка</a>
  <a class="nav-link" href="#">Ссылка</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

Работа с гибкими классами

Если вам нужна «отзывчивая» навигационная панель, рассмотрите использование классов флексбокса. Более подробные в спецификации, они предлагают более широкую настройку по отзывчивым брейкпойнтам. В примере ниже наша навигационная панель будет расположена по вертикали на самом маленьком брейкпойнте, затем обретет горизонтальную разметку, которая, начиная с большего брейкпойнта, займет всю доступную ширину.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Активная</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Более длинная навигационная ссылка</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Ссылка</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
</nav>

Доступность

Если вы пользуетесь навигационными элементами для создания навигационной панели, добавьте role="navigation" в наиболее подходящий для этого родительский контейнер <ul>, или оберните элементом <nav> всю навигацию. Не добавляйте атрибут role в сам <ul>, т.к. это может помешать вспомогательным технологиям распознать этот элемент как список.

Заметьте, что навигационные панели, даже если они стилизованы как вкладки классами .nav-tabs, не должны содержать role="tablist", role="tab" или role="tabpanel". Это атрибуты подходят лишь для динамических интерфейсов вкладок, как описано в WAI ARIA Authoring Practices. Смотрите, например, про поведение JavaScript c динамическими интерфейсами вкладок в этой секции.

Выпадающие элементы

Добавляйте меню с выпадающими элементами, используя совсем немного HTML и плагин выпадающих элементов JavaScript.

Вкладки с выпадающими элементами

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</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="#">Действие</a>
      <a class="dropdown-item" href="#">Другое действие</a>
      <a class="dropdown-item" href="#">Что-то еще здесь</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Отдельная ссылка</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Подушки с выпадающими элементами

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Активная</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="#">Действие</a>
      <a class="dropdown-item" href="#">Другое действие</a>
      <a class="dropdown-item" href="#">Что-то еще здесь</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Отдельная ссылка</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Ссылка</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключенная</a>
  </li>
</ul>

Поведение JavaScript

Используйте плагин JavaScript вкладок - подключите его индивидуально или через компилированный bootstrap.js - для расширения наших навигационных вкладок и «подушек» и создания вкладочных панелей локального содержимого, или даже выпадающие меню.

Если вы подключаете наши JavaScript файлы, вам потребуется util.js.

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

Заметьте, что интерфейсы динамически переключаемых вкладок не должны содержать выпадающие меню, т.к. это вызовет проблемы с usability и доступностью. С точки зрения удобства для пользователя тот факт, что триггер-элемент текущей отображаемой вкладки не виден немедленно (т.к. он находится внутри закрытого выпадающего меню), может вызвать неудобство. С точки зрения доступности пока еще не существует проверенного способа обозначить и передать такой тип элементов в паттерне стандарте WAI ARIA, что означает, что этот тип элементов нельзя сделать доступным для юзеров вспомогательных технологий.

Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Главная</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Профиль</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Контакт</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Чтобы помочь Вам удовлетворить Ваши потребности, это работает с разметкой на основе <ul>, как показано выше, или с любой произвольной разметкой “сверните свою”. Обратите внимание, что если Вы используете <nav>, Вам не следует добавлять role="tablist" непосредственно к нему, так как это переопределит собственную роль элемента как ориентира навигации. Вместо этого переключитесь на альтернативный элемент (в примере ниже, простой <div>) и оберните его <nav>.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Главная</a>
    <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Профиль</a>
    <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Контакт</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Плагин вкладок также работает с "подушками".

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Главная</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Профиль</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Контакт</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

И с вертикальными "подушками".

Главная Профиль Сообщения Настройки

Placeholder content for the tab panel. This one relates to the home tab. Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that wears the crown. Yes, we make angels cry, raining down on earth from up above. Wanna see the show in 3D, a movie. Do you ever feel, feel so paper thin. It’s a yes or no, no maybe.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Главная</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Профиль</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Сообщения</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Настройки</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

Используя атрибуты

Вы можете задействовать навигацию по вкладке или «подушке» без JavaScript, а просто добавив data-toggle="tab" или data-toggle="pill" к элементу. Используйте эти атрибуты в .nav-tabs или .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Через JavaScript

Включите вкладки с вкладками через JavaScript (каждую вкладку нужно активировать отдельно):

$('#myTab a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Вы можете активировать отдельные вкладки несколькими способами:

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

Эффект появления

Чтобы вкладки постепенно появлялись, добавьте класс .fade в каждый элемент класса .tab-pane. Первая вкладка .tab-pane также должна иметь класс .show, чтобы первоначальный контент был видимым.

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

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Смотрите документацию.

$().tab

Активирует вкладку и контейнер содержимого. Вкладка должна иметь data-target или href, «нацеленные» на контейнер-узел в DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

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

<script>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

.tab(‘show’)

Выбирает данную вкладку и показывает связанную с ней «подушку». Любая другая вкладка, которая была выбрана до этого, становится «невыбранной» и ее «подушка» прячется. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт (т.е. до того, как произойдет событие shown.bs.tab).

$('#someTab').tab('show')

.tab(‘dispose’)

Уничтожает вкладку элемента.

События

При показе новой вкладки события запускаются в такой порядке:

hide.bs.tab (на текущей активной вкладке)
show.bs.tab (на той, которая вот-вот покажется)
hidden.bs.tab (на предыдущей активной вкладке, как для события hide.bs.tab)
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 (event) {
  event.target // недавно активированная вкладка
  event.relatedTarget // предыдущая активная вкладка
})

Навигация

Основы