Navs ndi tabu

Zolemba ndi zitsanzo zamomwe mungagwiritsire ntchito zida za Bootstrap zomwe zikuphatikizidwa ndi navigation.

Patsamba ili

Base nav

Mayendedwe omwe amapezeka mu Bootstrap amagawana zolembera ndi masitayelo, kuchokera kumagulu oyambira .navkupita kumayiko omwe akugwira ntchito ndi olumala. Sinthani makalasi osintha kuti musinthe pakati pa sitayilo iliyonse.

Chigawo choyambira .navchimamangidwa ndi flexbox ndipo chimapereka maziko olimba omangira mitundu yonse ya zigawo za navigation. Zimaphatikizapo zolembedwa zina (zogwira ntchito ndi mindandanda), zolumikizira zina zamagawo akuluakulu omenyedwa, ndi masitayelo olemala.

Chigawo choyambira .navsichimaphatikizapo dziko lililonse .active. Zitsanzo zotsatirazi zikuphatikiza kalasi, makamaka kuwonetsa kuti kalasi ili siliyambitsa makongoletsedwe apadera.

Kuti mupereke zomwe zikuchitika ku matekinoloje othandizira, gwiritsani ntchito aria-currentchidziwitsocho - pogwiritsa ntchito pagemtengo watsamba lapano, kapena truechinthu chomwe chilipo mu seti.

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

Makalasi amagwiritsidwa ntchito ponseponse, kotero kuyika kwanu kumatha kusinthika kwambiri. Gwiritsani ntchito <ul>s monga pamwambapa, <ol>ngati dongosolo la zinthu zanu ndilofunika, kapena gudubuzani lanu ndi <nav>chinthu. Chifukwa chakugwiritsa .navntchito display: flex, maulalo a nav amachita chimodzimodzi monga momwe zinthu ziliri, koma popanda chowonjezera chowonjezera.

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

Masitayilo omwe alipo

Sinthani mawonekedwe a .navs gawo ndi zosintha ndi zofunikira. Sakanizani ndi kufananiza ngati mukufunikira, kapena pangani zanu.

Kuyanjanitsa kopingasa

Sinthani kuyanika kopingasa kwa nav yanu ndi zida za flexbox . Mwachikhazikitso, ma navs amakhala olunjika kumanzere, koma mutha kuwasintha kukhala apakati kapena kumanja.

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

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

Oima

Sungani navigation yanu posintha njira yosinthira zinthu ndi .flex-columnzofunikira. Mukuyenera kuwayika pamawonekedwe ena koma osati ena? Gwiritsani ntchito matembenuzidwe omvera (mwachitsanzo, .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>

Monga nthawi zonse, kuyenda koyima kumatheka popanda <ul>s, nakonso.

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

Ma tabu

Imatengera nav yoyambira kuchokera pamwamba ndikuwonjezera .nav-tabskalasi kuti ipange mawonekedwe osankhidwa. Agwiritseni ntchito kupanga zigawo zowoneka ndi tabu yathu 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>

Mapiritsi

Tengani HTML yomweyo, koma gwiritsani ntchito .nav-pills:

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

Lembani ndi kulungamitsa

Limbikitsani .navzomwe zili mkati mwanu kuti muwonjezere kukula komwe kulipo limodzi mwa magulu awiri osintha. Kuti mukwaniritse malo onse omwe alipo ndi yanu .nav-item, gwiritsani ntchito .nav-fill. Zindikirani kuti malo onse opingasa ali ndi anthu, koma sizinthu zonse za nav zomwe zili ndi m'lifupi mwake.

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

Mukamagwiritsa ntchito <nav>--based navigation, mutha kusiya mosamala .nav-itemmomwe .nav-linkzimafunikira pamakongoletsedwe <a>azinthu.

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

Pazinthu zokhala ndi kukula kofanana, gwiritsani ntchito .nav-justified. Malo onse opingasa adzakhala ndi maulalo a nav, koma mosiyana ndi .nav-fillpamwambapa, chinthu chilichonse cha nav chidzakhala chofanana m'lifupi.

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

Mofanana ndi .nav-fillchitsanzo pogwiritsa ntchito <nav>navigation -based.

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

Kugwira ntchito ndi flex utility

Ngati mukufuna ma nav osiyanasiyana omvera, lingalirani kugwiritsa ntchito zida zingapo za flexbox . Ngakhale zili zachidule kwambiri, zida izi zimapereka makonda ambiri pamagawo omvera. Muchitsanzo chomwe chili pansipa, nav yathu idzayikidwa pamalo otsika kwambiri, kenaka sinthani ndi mawonekedwe opingasa omwe amadzaza m'lifupi mwake kuyambira podutsa pang'ono.

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

Za kupezeka

Ngati mukugwiritsa ntchito navs kuti mupereke malo olowera, onetsetsani kuti mwawonjezera pa role="navigation"chidebe chomveka bwino cha kholo la <ul>, kapena kulungani <nav>chinthu pozungulira ponseponse. Osawonjeza gawolo <ul>, chifukwa izi zingalepheretse kulengezedwa ngati mndandanda weniweni ndi matekinoloje othandizira.

Dziwani kuti ma navigation bar, ngakhale atalembedwa ngati tabu ndi .nav-tabskalasi, sayenera kuperekedwa , role="tablist"kapena role="tab"mawonekedwe role="tabpanel". Izi ndizoyenera pazolumikizana zosinthika, monga zafotokozedwera mu WAI ARIA Authoring Practices . Onani machitidwe a JavaScript pamawonekedwe osinthika a tab mu gawoli mwachitsanzo. Mkhalidwewu aria-currentsiwofunikira pamawonekedwe osinthika a tabbed popeza JavaScript yathu imagwira gawo losankhidwa powonjezera aria-selected="true"pa tabu yogwira.

Kugwiritsa ntchito dropdowns

Onjezani mindandanda yotsitsa ndi HTML yowonjezera pang'ono ndi pulagi yotsitsa ya JavaScript .

Ma tabu okhala ndi zotsitsa

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

Mapiritsi okhala ndi zotsitsa

<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

Zosintha

$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;

Makhalidwe a JavaScript

Gwiritsani ntchito pulogalamu yowonjezera ya JavaScript-iphatikizepo payekhapayekha kapena kudzera pa bootstrap.jsfayilo yomwe yaphatikizidwa-kuti tiwonjezere ma tabu athu oyenda ndi mapiritsi kuti tipange mapanelo azomwe zili m'deralo.

Mawonekedwe amphamvu a tabbed, monga tafotokozera mu WAI ARIA Authoring Practices , amafuna role="tablist", role="tab", role="tabpanel", ndi zina zowonjezera aria-kuti apereke mawonekedwe awo, magwiridwe antchito ndi momwe alili pano kwa ogwiritsa ntchito matekinoloje othandizira (monga owerenga skrini). Monga njira yabwino, timalimbikitsa kugwiritsa ntchito <button>zinthu zama tabu, chifukwa awa ndi maulamuliro omwe amayambitsa kusintha kwamphamvu, osati maulalo omwe amapita kutsamba latsopano kapena malo.

Zindikirani kuti zolumikizira zosinthika siziyenera kukhala ndi mindandanda yotsitsa, chifukwa izi zimayambitsa zovuta zamagwiritsidwe ntchito komanso kupezeka. Malinga ndi momwe mungagwiritsire ntchito, mfundo yoti choyambitsa tabu yomwe ikuwonetsedwa pano sikuwoneka nthawi yomweyo (monga ili mkati mwa menyu otsika) ikhoza kuyambitsa chisokonezo. Kuchokera kumalo ofikirako, pakali pano palibe njira yodziwikiratu yopangira mapangidwe amtundu uwu kukhala mawonekedwe a WAI ARIA, kutanthauza kuti sizingamveke mosavuta kwa ogwiritsa ntchito matekinoloje othandizira.

Izi ndi zina zomwe zili ndi tabu Yakunyumba zomwe zikugwirizana nazo. Kudina tabu ina kudzasintha kuwonekera kwa iyi kuti ikwaniritse. Tsamba la JavaScript limasinthiratu makalasi kuti muwongolere mawonekedwe ndi masitayelo. Mutha kugwiritsa ntchito ndi ma tabo, mapiritsi, ndi .navnavigation ina iliyonse.

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>

Kuti zikuthandizeni kukwaniritsa zosowa zanu, izi zimagwira ntchito ndi <ul>zolembera zokhazikika, monga tawonera pamwambapa, kapena ndi zolembera zanu zilizonse. Zindikirani kuti ngati mukugwiritsa ntchito <nav>, simuyenera kuwonjezerapo role="tablist", chifukwa izi zitha kupitilira gawo lachilengedwe la chinthucho ngati chizindikiro choyendera. M'malo mwake, sinthani ku chinthu china (muchitsanzo chomwe chili pansipa, chosavuta <div>) ndikukulunga <nav>mozungulira.

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

Pulogalamu yowonjezera ya ma tabo imagwiranso ntchito ndi mapiritsi.

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

Ndipo ndi mapiritsi ofukula.

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>

Kugwiritsa ntchito mawonekedwe a data

Mutha kuyambitsa tabu kapena kuyenda kwamapiritsi osalemba JavaScript mwa kungotchulapo data-bs-toggle="tab"kapena data-bs-toggle="pill"pa chinthu. Gwiritsani ntchito mawonekedwe a data awa pa .nav-tabskapena .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>

Kudzera pa JavaScript

Yambitsani ma tabable kudzera pa JavaScript (tabu iliyonse iyenera kutsegulidwa payekhapayekha):

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

Mutha kuyambitsa ma tabo amodzi m'njira zingapo:

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

Kuzimiririka

Kuti ma tabo azitha kuzimiririka, onjezani .fadechilichonse .tab-pane. Gawo loyamba la tabu liyeneranso .showkupangitsa kuti zomwe zili zoyamba ziwonekere.

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

Njira

Asynchronous njira ndi kusintha

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

constructor

Activates a tab element and content container. Tab should have either a data-bs-target or, if using a link, an href attribute, targeting a container node in the 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>

show

Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tab event occurs).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

dispose

Destroys an element’s tab.

getInstance

Static method which allows you to get the tab instance associated with a DOM element

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialized

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Events

When showing a new tab, the events fire in the following order:

hide.bs.tab (on the current active tab)
show.bs.tab (on the to-be-shown tab)
hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

Event type	Description
`show.bs.tab`	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`shown.bs.tab`	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
`hide.bs.tab`	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
`hidden.bs.tab`	Chochitikachi chimayaka pambuyo poti tabu yatsopano yawonetsedwa (ndipo chifukwa chake tabu yogwira kale yabisika). Gwiritsani `event.target`ntchito `event.relatedTarget`ndikulunjika tabu yomwe idagwira kale ndi tabu yatsopano, motsatana.

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