Amato na tabs

Inyandiko n'ingero z'uburyo wakoresha Bootstrap irimo ibice byo kugenda.

Kuriyi page

Base nav

Kugenda kuboneka muri Bootstrap gusangira ibimenyetso rusange nuburyo, kuva murwego shingiro .navkugeza kuri leta ikora kandi ifite ubumuga. Swap modifier ibyiciro kugirango uhindure hagati yuburyo bwose.

Ibice fatizo .navbyubatswe na flexbox kandi bitanga umusingi ukomeye wo kubaka ubwoko bwose bwibikoresho byo kugenda. Harimo uburyo bumwe burenze (bwo gukorana nurutonde), guhuza padding kubice binini byibasiwe, hamwe nubumuga bwibanze.

Ibice shingiro .navntabwo birimo .activeleta iyo ariyo yose. Ingero zikurikira zirimo icyiciro, cyane cyane kwerekana ko iri somo ryihariye ridatera imiterere idasanzwe.

Kugirango utange leta ikora kugirango ifashe ikoranabuhanga, koresha aria-currentikiranga - ukoresheje pageagaciro kurupapuro rwubu, cyangwa truekubintu biri mumurongo.

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

Amasomo akoreshwa mugihe cyose, marike yawe rero irashobora guhinduka cyane. Koresha <ul>s nkibi byavuzwe haruguru, <ol>niba gahunda yibintu byawe ari ngombwa, cyangwa uzunguruke ibyawe hamwe <nav>nikintu. Kuberako .navikoreshwa display: flex, nav ihuza yitwara nkibintu bya nav byabikora, ariko nta marike yinyongera.

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

Uburyo buboneka

Hindura uburyo bwa .navs ibice hamwe nabahindura nibikorwa. Kuvanga no guhuza nkuko bikenewe, cyangwa wubake ibyawe.

Guhuza utambitse

Hindura utambitse utambitse ya nav yawe hamwe nibikoresho bya flexbox . Mburabuzi, navs ihujwe-ibumoso, ariko urashobora kuyihindura byoroshye hagati cyangwa iburyo.

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

Guhuza iburyo na .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>

Uhagaritse

Shyira inzira yawe muguhindura icyerekezo cya flex hamwe .flex-columnnibyingenzi. Ukeneye kubishyira kumurongo runaka ariko sibyo? Koresha verisiyo isubiza (urugero, .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>

Nkibisanzwe, vertical vertical ishoboka nta <ul>s, nayo.

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

Tab

Fata nav shingiro kuva hejuru hanyuma wongereho urwego .nav-tabsrwo kubyara interineti. Koresha kugirango ukore uturere twa tabbable hamwe na tab ya 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>

Ibinini

Fata iyo HTML imwe, ariko ukoreshe .nav-pillsaho:

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

Uzuza kandi ufite ishingiro

Hata .navibikubiyemo kugirango wongere ubugari bwuzuye buboneka kimwe mubyiciro bibiri bihindura. Kugereranya kuzuza umwanya wose uboneka hamwe na .nav-items, koresha .nav-fill. Menya ko umwanya wose utambitse urimo, ariko ntabwo buri kintu cya nav gifite ubugari bumwe.

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

Mugihe ukoresheje inzira <nav>-ishingiye kugendagenda, urashobora gusiba neza .nav-itemnkuko .nav-linkbisabwa gusa muburyo bwo gutunganya <a>ibintu.

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

Kubintu bingana-ubugari, koresha .nav-justified. Umwanya wose utambitse uzaba ufitwe na nav ihuza, ariko bitandukanye navuzwe .nav-fillharuguru, buri nav ikintu kizaba ubugari bumwe.

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

Bisa .nav-fillnurugero ukoresheje <nav>-bishingiye kugendagenda.

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

Gukorana na flex utilities

Niba ukeneye ibisubizo bitandukanya nav, tekereza gukoresha urukurikirane rwibikorwa bya flexbox . Mugihe inshinga nyinshi, izi nyungu zitanga ibisobanuro byinshi murwego rwo gusubiza. Murugero rukurikira, nav yacu izashyirwa kumurongo wo hasi cyane, hanyuma ihuze imiterere itambitse yuzuza ubugari buboneka guhera kumyanya mito.

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

Kubyerekeye kugerwaho

Niba ukoresha navs kugirango utange inzira yo kugendagenda, menya neza ko wongeraho role="navigation"kubintu byumvikana byababyeyi byabigenewe <ul>, cyangwa <nav>uzenguruke ikintu hafi yikigenda cyose. Ntukongere uruhare <ul>rwonyine, kuko ibi byakubuza gutangazwa nkurutonde nyarwo hakoreshejwe ikoranabuhanga rifasha.

Menya ko kugendagenda kumurongo, kabone niyo bigaragara muburyo bwa tabs hamwe .nav-tabsnurwego, ntibigomba gutangwa , role="tablist"cyangwa role="tab"ibiranga role="tabpanel". Ibi birakwiriye gusa kuri interineti ifite imbaraga, nkuko byasobanuwe mubikorwa bya WAI ARIA . Reba imyitwarire ya JavaScript kuri dinamike ya tabbed intera muri iki gice kurugero. Ikiranga aria-currentntabwo gikenewe kuri dinamike ya tabbed intera kuva JavaScript yacu ikora leta yatoranijwe mukongeraho aria-selected="true"kuri tab ikora.

Gukoresha ibitonyanga

Ongeraho ibimanuka hamwe na HTML yongeyeho na plugin ya JavaScript .

Tab hamwe nibitonyanga

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

Ibinini hamwe nibitonyanga

<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

Ibihinduka

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

Imyitwarire ya JavaScript

Koresha tab ya JavaScript plugin-shyiramo kugiti cyawe cyangwa unyuze muri bootstrap.jsdosiye yakozwe - kugirango wongere ibiyobora hamwe nibinini kugirango ukore ibipapuro byibirimo byaho.

Dynamic tabbed interface, nkuko byasobanuwe mubikorwa bya WAI ARIA byandika , bisaba role="tablist",,, nibindi biranga kugirango ubashe kwerekana imiterere, imikorere nuburyo bugezweho kubakoresha ikoranabuhanga rifasha (nkabasoma ecran). Nkumwitozo mwiza, turasaba gukoresha ibintu kuri tabs, kuko aribwo bugenzuzi butera impinduka zikomeye, aho guhuza inzira igana kurupapuro rushya cyangwa ahantu.role="tab"role="tabpanel"aria-<button>

Menya ko dinamike ya tabbed interfeque itagomba kubamo ibimanuka, kuko ibi bitera ibibazo byombi nibikoreshwa. Urebye kubikoresha, kuba ibyerekanwe kuri tab ya trigger yibintu bidahita bigaragara (nkuko biri imbere muri menu yafunzwe) birashobora gutera urujijo. Uhereye kubintu byoroshye, kuri ubu nta buryo bwumvikana bwo gushushanya ubu bwoko bwubaka ku buryo busanzwe bwa WAI ARIA, bivuze ko bidashobora kumvikana byoroshye kubakoresha ikoranabuhanga rifasha.

Nibintu bimwe byerekana umwanya murugo tab ijyanye nibirimo. Kanda kurundi tab bizahindura ibiboneka kuribi bikurikira. Tab JavaScript ihinduranya amasomo kugirango igenzure ibirimo kugaragara no kwishushanya. Urashobora kuyikoresha hamwe na tabs, ibinini, nibindi byose .nav-bishobora imbaraga zo kugenda.

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>

Kugirango ufashe guhuza ibyo ukeneye, ibi bikorana <ul>-bishingiye ku bimenyetso, nkuko bigaragara hejuru, cyangwa hamwe na hamwe "kuzunguruka ibyawe". Menya ko niba ukoresha <nav>, ntugomba kubyongeraho role="tablist"muburyo butaziguye, kuko ibi byakwirengagiza uruhare kavukire nkibimenyetso byerekana inzira. Ahubwo, hindukira mubindi bikoresho (murugero rukurikira, byoroshye <div>) hanyuma <nav>uzenguruke.

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

Amacomeka ya tabs nayo akorana n'ibinini.

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

Kandi hamwe n'ibinini bihagaritse.

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>

Koresha ibiranga amakuru

Urashobora gukora tab cyangwa ibinini bigenda utanditse JavaScript iyo ari yo yose ugaragaza gusa data-bs-toggle="tab"cyangwa data-bs-toggle="pill"kubintu. Koresha aya makuru ibiranga kuri .nav-tabscyangwa .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>

Binyuze kuri JavaScript

Gushoboza imbonerahamwe ya tabs ukoresheje JavaScript (buri tab igomba gukenera kugiti cye):

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

Urashobora gukora ama tabs kugiti cye muburyo butandukanye:

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

Ingaruka zashize

Kugirango utume gushira, ongera .fadekuri buri .tab-pane. Urupapuro rwa mbere rwa pane rugomba kandi .showgukora ibintu byambere bigaragara.

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

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

constructor

Gukora tab element hamwe nibikoresho birimo. Tab igomba kuba ifite a data-bs-targetcyangwa, niba ukoresheje umurongo, hrefikiranga, ugamije ikintu cya kontineri muri 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>

kwerekana

Hitamo tab yatanzwe kandi yerekana pane ifitanye isano. Iyindi tab yose yatoranijwe mbere iba idatoranijwe kandi pane ifitanye isano irahishe. Garuka kumuhamagara mbere yuko tab pane yerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.tabibyabaye biba).

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

  tab.show()

guta

Gusenya ikintu cyibintu.

Kubona

Uburyo buhamye bugufasha kubona urugero rwa tab rujyanye nibintu bya DOM

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

Kubona

Uburyo buhamye bugufasha kubona urugero rwa tab rujyanye nibintu bya DOM, cyangwa gukora bundi bushya mugihe bitatangijwe

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

Ibyabaye

Iyo werekanye tab nshya, ibyabaye birashya muburyo bukurikira:

hide.bs.tab(kuri tab ikora)
show.bs.tab(kuri to-kwerekanwa tab)
hidden.bs.tab(kurupapuro rwibanze rukora, kimwe hide.bs.tabnkicyabaye)
shown.bs.tab(ku gishya-gikora gusa-cyerekanwe tab, kimwe kimwe show.bs.tabnicyabaye)

Niba nta tab yari isanzwe ikora, noneho hide.bs.tabibyabaye hidden.bs.tabntibizasezererwa.

Ubwoko bwibyabaye	Ibisobanuro
`show.bs.tab`	Ibirori birasa kuri tab yerekana, ariko mbere yuko tab nshya yerekanwe. Koresha `event.target`no `event.relatedTarget`gutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
`shown.bs.tab`	Ibirori birasa kuri tab yerekanwe nyuma ya tab yerekanwe. Koresha `event.target`no `event.relatedTarget`gutondekanya tab ikora hamwe na tab yabanjirije gukora (niba ihari).
`hide.bs.tab`	Ibirori birasa iyo tab nshya igomba kwerekanwa (nuko rero tab ikora ibanza igomba guhishwa). Koresha `event.target`no `event.relatedTarget`guhitamo icyerekezo gikora hamwe nigishya vuba-kugirango-ukore-tab, kimwe.
`hidden.bs.tab`	Ibirori birashya nyuma yerekana tab nshya yerekanwe (nuko rero tab yabanjirije gukora irahishe). Koresha `event.target`kandi `event.relatedTarget`ugamije kubanza gukora tab hamwe na tab nshya ikora, kimwe.

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