Навигация
Документация и примеры использования компонентов навигации, включенных в Bootstrap.
Базовая навигация
Навигация, доступная в Bootstrap, использует общую разметку и стили, от базового .nav
класса до активного и отключенного состояний. Поменяйте местами классы модификаторов, чтобы переключаться между каждым стилем.
Базовый .nav
компонент создан с помощью flexbox и обеспечивает прочную основу для создания всех типов навигационных компонентов. Он включает в себя некоторые переопределения стилей (для работы со списками), некоторые отступы ссылок для больших областей попадания и базовые отключенные стили.
.nav
компонент не включает никакого
.active
состояния. Следующие примеры включают этот класс, главным образом для того, чтобы продемонстрировать, что этот конкретный класс не запускает никаких специальных стилей.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Классы используются повсюду, поэтому ваша разметка может быть очень гибкой. Используйте <ul>
s, как указано выше, <ol>
если порядок ваших элементов важен, или сверните свой собственный с <nav>
элементом. Поскольку .nav
использует display: flex
, ссылки навигации ведут себя так же, как и элементы навигации, но без дополнительной разметки.
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Доступные стили
Измените стиль .nav
компонента s с помощью модификаторов и утилит. Смешивайте и сочетайте по мере необходимости или создавайте свои собственные.
Горизонтальное выравнивание
Измените горизонтальное выравнивание вашей навигации с помощью утилит flexbox . По умолчанию навигация выровнена по левому краю, но вы можете легко изменить ее на центральную или правую.
По центру с .justify-content-center
:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Выровнено по правому краю с .justify-content-end
:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Вертикальный
Сложите свою навигацию, изменив направление гибкого элемента с помощью .flex-column
утилиты. Нужно разместить их на одних окнах просмотра, но не на других? Используйте адаптивные версии (например, .flex-sm-column
).
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Как всегда, вертикальная навигация возможна и без <ul>
s.
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Вкладки
Берет базовую навигацию сверху и добавляет .nav-tabs
класс для создания интерфейса с вкладками. Используйте их для создания областей с вкладками с помощью нашего плагина JavaScript для вкладок .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Таблетки
Возьмите тот же HTML, но .nav-pills
вместо этого используйте:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Заполнить и обосновать
Заставьте ваше .nav
содержимое расширить всю доступную ширину одного из двух классов модификаторов. Чтобы пропорционально заполнить все доступное пространство вашими .nav-item
s, используйте .nav-fill
. Обратите внимание, что все горизонтальное пространство занято, но не все элементы навигации имеют одинаковую ширину.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
При использовании <nav>
навигации на основе , вы можете смело опускать ее .nav-item
, так как .nav-link
это требуется только для <a>
элементов стиля.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Для элементов одинаковой ширины используйте .nav-justified
. Все горизонтальное пространство будет занято навигационными ссылками, но, в отличие от приведенного .nav-fill
выше, каждый элемент навигации будет иметь одинаковую ширину.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Аналогично .nav-fill
примеру с использованием <nav>
навигации на основе .
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Работа с гибкими утилитами
Если вам нужны адаптивные варианты навигации, рассмотрите возможность использования серии утилит flexbox . Несмотря на то, что эти утилиты более подробные, они предлагают более широкие возможности настройки реагирующих точек останова. В приведенном ниже примере наша навигация будет располагаться на самой нижней контрольной точке, а затем адаптироваться к горизонтальному макету, который заполняет доступную ширину, начиная с маленькой контрольной точки.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>
Что касается доступности
Если вы используете navs для предоставления панели навигации, не забудьте добавить a role="navigation"
в наиболее логичный родительский контейнер <ul>
или оберните <nav>
элемент вокруг всей навигации. Не добавляйте роль в <ul>
саму роль, так как это помешает ассистивным технологиям объявить ее как фактический список.
Обратите внимание, что панели навигации, даже если они визуально оформлены как вкладки с .nav-tabs
классом, не должны иметь или атрибуты. Они подходят только для динамических интерфейсов с вкладками, как описано в шаблоне вкладок ARIA Authoring Practices Guide . См . пример поведения JavaScript для динамических интерфейсов с вкладками в этом разделе.role="tablist"
role="tab"
role="tabpanel"
Использование раскрывающихся списков
Добавьте выпадающие меню с небольшим дополнительным HTML и подключаемым модулем JavaScript для раскрывающихся списков .
Вкладки с выпадающими списками
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Таблетки с выпадающими списками
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Поведение JavaScript
Используйте подключаемый модуль JavaScript для вкладок — включите его отдельно или через скомпилированный bootstrap.js
файл — чтобы расширить наши навигационные вкладки и панели для создания вкладок с локальным контентом.
Если вы создаете наш JavaScript из исходного кода, для этого требуетсяutil.js
.
Динамические интерфейсы с вкладками, как описано в шаблоне вкладок ARIA Authoring Practices Guide , требуют role="tablist"
, role="tab"
, role="tabpanel"
и дополнительных aria-
атрибутов, чтобы передать их структуру, функциональность и текущее состояние пользователям вспомогательных технологий (таких как программы чтения с экрана). Мы рекомендуем использовать <button>
элементы для вкладок, так как это элементы управления, запускающие динамические изменения, а не ссылки, ведущие на новую страницу или место.
Содержимое заполнителя для панели вкладок. Это относится к домашней вкладке. Поднимет вас на много миль вверх, так высоко, потому что у нее эта единственная интернациональная улыбка. В моей постели незнакомец, в голове стук. О, нет. В другой жизни я бы заставил тебя остаться. Потому что я, я способен на все. Готовлюсь к моей решающей битве. Использовался, чтобы украсть спиртное у ваших родителей и забраться на крышу. Тон, загар в форме и готово, включите его, потому что он становится тяжелым. Ее любовь подобна наркотику. Наверное, я забыл, что у меня есть выбор.
Содержимое заполнителя для панели вкладок. Это относится к вкладке профиля. У тебя лучшая архитектура. Штампы в паспорте, она космополитка. Прекрасно, свежо, свирепо, мы засекли. Никогда не планировал, что однажды я потеряю тебя. Она съедает твое сердце. Твой поцелуй космический, каждое движение волшебное. Я имею в виду тех, я имею в виду, что она та самая. Приветствую вас, дорогие, давайте отправимся в путешествие. Просто владейте ночью, как 4 июля! Но ты предпочитаешь напиться.
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">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</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">
<button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</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>
Плагин вкладок также работает с таблетками.
Содержимое заполнителя для панели вкладок. Это относится к домашней вкладке. Поднимет вас на много миль вверх, так высоко, потому что у нее эта единственная интернациональная улыбка. В моей постели незнакомец, в голове стук. О, нет. В другой жизни я бы заставил тебя остаться. Потому что я, я способен на все. Готовлюсь к моей решающей битве. Использовался, чтобы украсть спиртное у ваших родителей и забраться на крышу. Тон, загар в форме и готово, включите его, потому что он становится тяжелым. Ее любовь подобна наркотику. Наверное, я забыл, что у меня есть выбор.
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-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</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>
И с вертикальными таблетками.
Содержимое заполнителя для панели вкладок. Это относится к домашней вкладке. Видел, как ты в центре города поешь блюз. Наблюдайте, как вы кружите вокруг стока. Почему бы тебе не позволить мне остановиться? Тяжела голова, носящая корону. Да, мы заставляем ангелов плакать, проливая дождь на землю сверху. Хотите посмотреть шоу в 3D, фильм. Вы когда-нибудь чувствовали, чувствовали себя такими тонкими, как бумага. Это да или нет, возможно нет.
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">
<button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</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">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</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 button').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Вы можете активировать отдельные вкладки несколькими способами:
$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab
Эффект затухания
Чтобы вкладки исчезали, добавьте .fade
к каждому файлу .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 являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .
Дополнительную информацию см. в нашей документации по JavaScript .
$(). вкладка
Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь атрибут data-target
или, если используется ссылка, href
атрибут, указывающий на узел-контейнер в DOM.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</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 button').tab('show')
})
</script>
.tab('показать')
Выбирает данную вкладку и показывает связанную с ней панель. Любая другая ранее выбранная вкладка становится невыбранной, а связанная с ней панель скрывается. Возвращает вызывающему объекту до фактического отображения панели вкладок (т. е. до shown.bs.tab
возникновения события).
$('#someTab').tab('show')
.tab('распоряжаться')
Уничтожает вкладку элемента.
События
При отображении новой вкладки события запускаются в следующем порядке:
hide.bs.tab
(на текущей активной вкладке)show.bs.tab
(на вкладке "Показать")hidden.bs.tab
(на предыдущей активной вкладке, той же, что и дляhide.bs.tab
события)shown.bs.tab
(на вновь-активной только что показанной вкладке, той же, что и дляshow.bs.tab
события)
Если ни одна вкладка не была активна, события hide.bs.tab
и hidden.bs.tab
не будут запущены.
Тип события | Описание |
---|---|
показать.bs.tab | Это событие срабатывает при показе вкладки, но до того, как будет показана новая вкладка. Используйте event.target и event.relatedTarget для выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно. |
показана.bs.tab | Это событие срабатывает при показе вкладки после того, как вкладка была показана. Используйте event.target и event.relatedTarget для выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно. |
скрыть.bs.tab | Это событие срабатывает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте event.target и event.relatedTarget для выбора текущей активной вкладки и новой вкладки, которая скоро станет активной, соответственно. |
скрытая.bs.tab | Это событие срабатывает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте event.target и event.relatedTarget для выбора предыдущей активной вкладки и новой активной вкладки соответственно. |
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})