Navs namathebhu

Amadokhumenti nezibonelo zokuthi zisetshenziswa kanjani izingxenye ze-Bootstrap zokuzulazula ezifakiwe.

Kuleli khasi

Base nav

Ukuzulazula kutholakala ku-Bootstrap yabelana ngemakhaphu evamile nezitayela, kusukela kusigaba sesisekelo .navkuya ezifundazweni ezisebenzayo nezikhubazekile. Shintshanisa amakilasi okushintsha ukuze ushintshe phakathi kwesitayela ngasinye.

Ingxenye yesisekelo .navyakhiwe 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 .navayifaki noma yisiphi .activeisimo. Izibonelo ezilandelayo zifaka ikilasi, ikakhulukazi ukukhombisa ukuthi lesi sigaba asibangeli isitayela esikhethekile.

Ukuze udlulisele isimo esisebenzayo kubuchwepheshe obusizayo, sebenzisa aria-currentisibaluli — usebenzisa pageinani lekhasi lamanje, noma trueinto 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" href="#" tabindex="-1" aria-disabled="true">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 .navukusetshenziswa 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Izitayela ezitholakalayo

Shintsha isitayela sengxenye ye- .navs 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Iqondile

Beka ukuzulazula kwakho ngokushintsha isiqondiso sento eguquguqukayo ngohlelo .flex-columnlokusebenza. 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Amathebhu

Ithatha i-nav eyisisekelo kusuka phezulu futhi yengeza .nav-tabsiklasi 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Amaphilisi

Thatha leyo HTML efanayo, kodwa sebenzisa .nav-pillsesikhundleni 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Gcwalisa futhi ubeke izizathu

Phoqa .navokuqukethwe kwakho ukunweba ububanzi obugcwele obutholakalayo izigaba ezimbili zesilungisi. Ukuze ugcwalise ngokulinganayo zonke izikhala ezitholakalayo nge- .nav-items 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Uma usebenzisa <nav>ukuzulazula okusekelwe, ungashiya ngokuphephile .nav-itemnjengoba .nav-linkkudingeka 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Ukuze uthole ama-elementi anobubanzi obulinganayo, sebenzisa .nav-justified. Sonke isikhala esivundlile sizosetshenziswa izixhumanisi ze-nav, kodwa ngokungafani nalokhu .nav-fillokungenhla, 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Ngokufanayo .nav-fillnesibonelo 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 aneklasi .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-currentasidingeki 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 .navukuzulazula 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.

<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.

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-tabsnoma .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 ngayodwa):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
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 a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Fade umphumela

Ukuze wenze amathebhu afiphale, .fadeengeza .tab-pane. Ifasitelana lethebhu yokuqala kufanele futhi .showlenze 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 . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, 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-targetnoma, uma isebenzisa isixhumanisi, hrefisibaluli, 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 a')
  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.tabkwenzeke 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, efanayo hide.bs.tabneyomcimbi)
shown.bs.tab(kuthebhu esanda kuboniswa, efanayo show.bs.tabneyomcimbi)

Uma ingekho ithebhu ebivele iyasebenza, kuzosho ukuthi i- hide.bs.tabnemicimbi hidden.bs.tabngeke kuxoshwe.

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
})