Navs namathebhu
Amadokhumenti nezibonelo zokuthi zisetshenziswa kanjani izingxenye ze-Bootstrap zokuzulazula ezifakiwe.
Isisekelo nav
Ukuzulazula kutholakala ku-Bootstrap yabelana ngemakhaphu evamile nezitayela, kusukela kusigaba sesisekelo .nav
kuya ezifundazweni ezisebenzayo nezikhubazekile. Shintshanisa amakilasi okushintsha ukuze ushintshe phakathi kwesitayela ngasinye.
Ingxenye yesisekelo .nav
yakhiwe nge-flexbox futhi inikeza isisekelo esiqinile sokwakha zonke izinhlobo zezingxenye zokuzulazula. Kubandakanya ukubhala ngaphezulu kwesitayela esithile (sokusebenza ngezinhlu), ezinye izixhumanisi zokunamathisela izindawo ezinkulu ezishaywayo, kanye nesitayela esiyisisekelo esikhubazekile.
Ingxenye yesisekelo .nav
ayifaki noma yisiphi .active
isimo. Izibonelo ezilandelayo zifaka ikilasi, ikakhulukazi ukukhombisa ukuthi lesi sigaba asibangeli isitayela esikhethekile.
Ukuze udlulisele isimo esisebenzayo kubuchwepheshe obusizayo, sebenzisa aria-current
isibaluli — usebenzisa page
inani lekhasi lamanje, noma true
into yamanje kusethi.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Amakilasi asetshenziswa kulo lonke, ngakho umaki wakho ungaguquguquka kakhulu. Sebenzisa u <ul>
-s njengangenhla, <ol>
uma ukuhleleka kwezinto zakho kubalulekile, noma gingqa eyakho ngento <nav>
. Ngoba .nav
ukusetshenziswa display: flex
, izixhumanisi ze-nav ziziphatha ngendlela efanayo nezinto ze-nav, kodwa ngaphandle kwemakhaphu eyengeziwe.
<nav class="nav">
<a class="nav-link active" aria-current="page" 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>
Izitayela ezitholakalayo
Shintsha isitayela sengxenye ye- .nav
s ngezilungisi kanye nezinsiza. Hlanganisa futhi ufanise njengoba kudingeka, noma wakhe owakho.
Ukuqondanisa okuvundlile
Shintsha ukuqondanisa okuvundlile kwe-nav yakho nezinsiza ze- flexbox . Ngokuzenzakalelayo, ama-navs aqondaniswe kwesokunxele, kodwa ungakwazi ukuwashintsha kalula ukuze aqondaniswe maphakathi noma kwesokudla.
Kuphakathi kokuthi .justify-content-center
:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Iqondaniswe kwesokudla ne- .justify-content-end
:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Iqondile
Beka ukuzulazula kwakho ngokushintsha isiqondiso sento eguquguqukayo ngohlelo .flex-column
lokusebenza. Udinga ukuwabeka kwezinye izindawo zokubuka kodwa hhayi kwezinye? Sebenzisa izinguqulo eziphendulayo (isb, .flex-sm-column
).
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Njengenjwayelo, ukuzulazula okuqondile kuyenzeka ngaphandle <ul>
kuka-s, futhi.
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" 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>
Amathebhu
Ithatha i-nav eyisisekelo kusuka phezulu futhi yengeza .nav-tabs
iklasi ukuze ikhiqize isixhumi esibonakalayo esinamathebhu. Zisebenzise ukuze udale izifunda ezithintekayo ngethebhu yethu i- JavaScript plugin .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Amaphilisi
Thatha leyo HTML efanayo, kodwa sebenzisa .nav-pills
esikhundleni salokho:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Gcwalisa futhi ubeke izizathu
Phoqa .nav
okuqukethwe kwakho ukunweba ububanzi obugcwele obutholakalayo izigaba ezimbili zesilungisi. Ukuze ugcwalise ngokulinganayo zonke izikhala ezitholakalayo nge- .nav-item
s yakho, sebenzisa .nav-fill
. Qaphela ukuthi sonke isikhala esivundlile sigcwele, kodwa akuzona zonke izinto ze-nav ezinobubanzi obufanayo.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Uma usebenzisa <nav>
ukuzulazula okusekelwe, ungashiya ngokuphephile .nav-item
njengoba .nav-link
kudingeka kuphela <a>
ezintweni zesitayela.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" 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>
Ukuze uthole ama-elementi anobubanzi obulinganayo, sebenzisa .nav-justified
. Sonke isikhala esivundlile sizosetshenziswa izixhumanisi ze-nav, kodwa ngokungafani nalokhu .nav-fill
okungenhla, yonke into ye-nav izoba nobubanzi obufanayo.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Ngokufanayo .nav-fill
nesibonelo usebenzisa <nav>
ukuzulazula okusekelwe.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" 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>
Ukusebenza ngezinsiza eziguqukayo
Uma udinga ukuhlukahluka okusabelayo kwe-nav, cabanga ukusebenzisa uchungechunge lwezinsiza ze- flexbox . Ngenkathi i-verbose kakhudlwana, lezi zinsiza zinikeza ukwenza ngokwezifiso okukhulu kuwo wonke ama-breakpoints asabelayo. Esibonelweni esingezansi, i-nav yethu izopakishwa endaweni yokuphumula ephansi kakhulu, bese ijwayelana nesakhiwo esivundlile esigcwalisa ububanzi obutholakalayo kusukela endaweni encane yokuhlukana.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" 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>
Mayelana nokufinyeleleka
Uma usebenzisa i-navs ukuze unikeze ibha yokuzulazula, qiniseka ukuthi ungeza u-a role="navigation"
esiqukathi esinengqondo kunazo zonke esingumzali se- <ul>
, noma usonge into ethile kukho <nav>
konke ukuzulazula. Ungangezi indima <ul>
kuyona uqobo, njengoba lokhu kuzoyivimbela ukuthi imenyezelwe njengohlu lwangempela ngobuchwepheshe obusizayo.
Qaphela ukuthi amabha okuzulazula, ngisho noma enziwe isitayela njengamathebhu anesigaba .nav-tabs
, akufanele anikezwe , role="tablist"
noma role="tab"
izibaluli role="tabpanel"
. Lokhu kulungele kuphela ukuxhumana kwamathebhu ashukumisayo, njengoba kuchazwe ku- WAI ARIA Imikhuba Yokugunyaza . Bona impatho ye-JavaScript yezindawo zokusebenzelana zamathebhu ashukumisayo kulesi sigaba njengesibonelo. Isibaluli aria-current
asidingeki kuzixhumanisi zamathebhu ashukumisayo njengoba i-JavaScript yethu isingatha isimo esikhethiwe ngokwengeza aria-selected="true"
kuthebhu esebenzayo.
Ukusebenzisa okwehliswayo
Engeza amamenyu okwehlayo nge-HTML encane eyengeziwe kanye ne- plugin ye-JavaScript eyehlayo .
Amathebhu anokwehliswayo
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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>
Amaphilisi ane dropdowns
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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>
Sass
Okuguquguqukayo
$nav-link-padding-y: .5rem;
$nav-link-padding-x: 1rem;
$nav-link-font-size: null;
$nav-link-font-weight: null;
$nav-link-color: $link-color;
$nav-link-hover-color: $link-hover-color;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color: $gray-600;
$nav-tabs-border-color: $gray-300;
$nav-tabs-border-width: $border-width;
$nav-tabs-border-radius: $border-radius;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color: $gray-700;
$nav-tabs-link-active-bg: $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;
$nav-pills-border-radius: $border-radius;
$nav-pills-link-active-color: $component-active-color;
$nav-pills-link-active-bg: $component-active-bg;
Ukuziphatha kweJavaScript
Sebenzisa i-plugin yethebhu ye-JavaScript—ifake ngayodwa noma ngefayela elihlanganisiwe bootstrap.js
—ukuze unwebe amathebhu ethu okuzulazula namaphilisi ukuze udale amafasitelana angamathebhu okuqukethwe kwasendaweni.
Izixhumi ezibonakalayo ezinamathebhu anamandla, njengoba kuchazwe ku- WAI ARIA Imikhuba Yokugunyaza , idinga role="tablist"
, role="tab"
, role="tabpanel"
, nezibaluli ezengeziwe aria-
ukuze kudluliselwe ukwakheka kwazo, ukusebenza nesimo samanje kubasebenzisi bobuchwepheshe obusizayo (njengabafundi besikrini). Njengomkhuba omuhle kakhulu, sincoma ukusebenzisa <button>
izici zamathebhu, njengoba lezi kuyizilawuli ezicupha ushintsho oluguqukayo, kunezixhumanisi ezizulazulela ekhasini elisha noma indawo.
Qaphela ukuthi ukuxhumana kwamathebhu ashukumisayo akufanele kuqukathe amamenyu okwehlayo, njengoba lokhu kubangela kokubili izinkinga zokusebenziseka nokufinyeleleka. Ngokombono wokusebenziseka, iqiniso lokuthi i-elementi ye-trigger yethebhu ebonisiwe okwamanje ayibonakali ngokushesha (njengoba ingaphakathi kwemenyu yokudonsela phansi evaliwe) ingabangela ukudideka. Ngokombono wokufinyeleleka, okwamanje ayikho indlela ephusile yokubeka lolu hlobo lokwakha kuphethini evamile ye-WAI ARIA, okusho ukuthi ngeke yenziwe iqondakale kalula kubasebenzisi bobuchwepheshe obusizayo.
Lokhu okunye okuqukethwe kwesimeli ithebhu yasekhaya okuqukethwe okuhlotshaniswayo kwethebhu. Ukuchofoza enye ithebhu kuzoshintsha ukubonakala kwalena kokulandelayo. Ithebhu ye-JavaScript ishintshanisa amakilasi ukuze ulawule ukubonakala kokuqukethwe kanye nesitayela. Ungayisebenzisa namathebhu, amaphilisi, nanoma yikuphi okunye .nav
ukuzulazula okunamandla.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
Ukuze usize ukulingana nezidingo zakho, lokhu kusebenza <ul>
ngomaka -okusekelwe, njengoba kuboniswe ngenhla, noma nganoma iyiphi imakhaphu ethi "zigoqe ngokwakho". Qaphela ukuthi uma usebenzisa i- <nav>
, akufanele wengeze kuyo role="tablist"
ngokuqondile, njengoba lokhu kuzokhipha indima yomdabu ye-elementi njengophawu lwendawo yokuzulazula. Esikhundleni salokho, shintshela kwenye into (esibonelweni esingezansi, elula <div>
) bese uyisonga <nav>
.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
I-plugin yamathebhu futhi isebenza namaphilisi.
Lokhu okunye okuqukethwe kwesimeli ithebhu yasekhaya okuqukethwe okuhlotshaniswayo kwethebhu. Ukuchofoza enye ithebhu kuzoshintsha ukubonakala kwalena kokulandelayo. Ithebhu ye-JavaScript ishintshanisa amakilasi ukuze ulawule ukubonakala kokuqukethwe kanye nesitayela. Ungayisebenzisa namathebhu, amaphilisi, nanoma yikuphi okunye .nav
ukuzulazula okunamandla.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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>
Futhi namaphilisi aqondile.
Lokhu okunye okuqukethwe kwesimeli ithebhu yasekhaya okuqukethwe okuhlotshaniswayo kwethebhu. Ukuchofoza enye ithebhu kuzoshintsha ukubonakala kwalena kokulandelayo. Ithebhu ye-JavaScript ishintshanisa amakilasi ukuze ulawule ukubonakala kokuqukethwe kanye nesitayela. Ungayisebenzisa namathebhu, amaphilisi, nanoma yikuphi okunye .nav
ukuzulazula okunamandla.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-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-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<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>
Ukusebenzisa izibaluli zedatha
Ungakwazi ukuvula ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-JavaScript ngokucacisa data-bs-toggle="tab"
noma ngento data-bs-toggle="pill"
ethile. Sebenzisa lezi zibaluli zedatha kokuthi .nav-tabs
noma .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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
Nge-JavaScript
Nika amandla amathebhu aphathekayo nge-JavaScript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwana):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
Ungavula amathebhu ngamanye ngezindlela ezimbalwa:
var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
Fade umphumela
Ukuze wenze amathebhu afiphale, .fade
engeza .tab-pane
. Ifasitelana lethebhu yokuqala kufanele futhi .show
lenze okuqukethwe kokuqala kubonakale.
<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>
Izindlela
Izindlela ze-Asynchronous kanye noshintsho
Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Abuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngaphezu kwalokho, ikholi yendlela engxenyeni yoshintsho izozitshwa .
Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .
constructor
Yenza i-elementi yethebhu isebenze nesiqukathi sokuqukethwe. Ithebhu kufanele ibe no- data-bs-target
noma, uma isebenzisa isixhumanisi, href
isibaluli, eqondise inodi yesiqukathi ku-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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-bs-toggle="tab" data-bs-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>
var firstTabEl = document.querySelector('#myTab li:last-child button')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
umbukiso
Ikhetha ithebhu enikeziwe futhi ibonise ifasitelana elihlotshaniswa nayo. Noma iyiphi enye ithebhu ekhethwe ngaphambilini iyayekwa ukukhethwa futhi ifasitelana elihlobene nalo liyafihlwa. Ibuyela kofonayo ngaphambi kokuba kuboniswe ifasitelana lethebhu (okungukuthi ngaphambi kokuba shown.bs.tab
kwenzeke umcimbi).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
lahla
Icekela phansi ithebhu yento.
getInstance
Indlela emile ekuvumela ukuthi uthole isibonelo sethebhu esihlotshaniswa nento ye-DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Indlela emile ekuvumela ukuthi uthole isibonelo sethebhu esihlotshaniswa nento ye-DOM, noma udale entsha uma kwenzeka ingaqaliswanga.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Imicimbi
Uma ubonisa ithebhu entsha, izehlakalo zivutha ngokulandelana okulandelayo:
hide.bs.tab
(kuthebhu esebenzayo yamanje)show.bs.tab
(kuthebhu ezoboniswa)hidden.bs.tab
(kuthebhu esebenzayo yangaphambilini, efanayohide.bs.tab
neyomcimbi)shown.bs.tab
(kuthebhu esanda kuboniswa, efanayoshow.bs.tab
neyomcimbi)
Uma ingekho ithebhu ebivele iyasebenza, kuzosho ukuthi i- hide.bs.tab
nemicimbi hidden.bs.tab
ngeke ixoshwe.
Uhlobo lomcimbi | Incazelo |
---|---|
show.bs.tab |
Lo mcimbi uvutha embukisweni wethebhu, kodwa ngaphambi kokuthi kuboniswe ithebhu entsha. Sebenzisa event.target futhi event.relatedTarget uqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo. |
shown.bs.tab |
Lo mcimbi uvutha embukisweni wethebhu ngemva kokuthi ithebhu isibonisiwe. Sebenzisa event.target futhi event.relatedTarget uqondise ithebhu esebenzayo kanye nethebhu esebenzayo yangaphambilini (uma ikhona) ngokulandelanayo. |
hide.bs.tab |
Lo mcimbi uvutha lapho ithebhu entsha izoboniswa (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo izofihlwa). Sebenzisa event.target futhi event.relatedTarget uqondise ithebhu esebenzayo yamanje kanye nethebhu entsha ezosebenza maduze, ngokulandelana. |
hidden.bs.tab |
Lo mcimbi uvutha ngemva kokuboniswa kwethebhu entsha (futhi ngaleyo ndlela ithebhu yangaphambilini esebenzayo ifihliwe). Sebenzisa event.target futhi event.relatedTarget uqondise ithebhu esebenzayo yangaphambilini kanye nethebhu entsha esebenzayo, ngokulandelanayo. |
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})