навигация
Документация и примери за това как да използвате включените навигационни компоненти на 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>
Работа с flex помощни програми
Ако имате нужда от адаптивни варианти на навигация, обмислете използването на серия от помощни програми 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>
Относно достъпността
Ако използвате навигации, за да предоставите лента за навигация, не забравяйте да добавите role="navigation"
към най-логичния родителски контейнер на <ul>
, или обвийте <nav>
елемент около цялата навигация. Не добавяйте ролята към <ul>
себе си, тъй като това би попречило да бъде обявена като действителен списък от помощни технологии.
Обърнете внимание, че лентите за навигация, дори визуално оформени като раздели с .nav-tabs
класа, не трябва да получават атрибути или . Те са подходящи само за динамични интерфейси с раздели, както е описано в шаблона на раздели Ръководство за практики за авторство на ARIA . Вижте поведението на 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 , изискват 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 методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .
$().tab
Активира разделен елемент и контейнер със съдържание. Tab трябва да има или атрибут, насочен към контейнерен възел в DOM data-target
, ако използва връзка .href
<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('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 , за да насочите съответно активния раздел и предишния активен раздел (ако е наличен). |
показано.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
})