Navs ati awọn taabu

Iwe ati awọn apẹẹrẹ fun bi o ṣe le lo Bootstrap pẹlu awọn paati lilọ kiri.

Lori iwe yi

Nav mimọ

Lilọ kiri ni Bootstrap pin isamisi gbogbogbo ati awọn aza, lati .navkilasi ipilẹ si awọn ipinlẹ ti nṣiṣe lọwọ ati alaabo. Yipada awọn kilasi modifier lati yipada laarin ara kọọkan.

A ṣe ipilẹ .navpaati ipilẹ pẹlu flexbox ati pese ipilẹ to lagbara fun kikọ gbogbo awọn iru awọn paati lilọ kiri. O pẹlu diẹ ninu awọn ifasilẹ ara (fun ṣiṣẹ pẹlu awọn atokọ), diẹ ninu awọn padding ọna asopọ fun awọn agbegbe to buruju nla, ati aṣa alaabo ipilẹ.

Ẹya ipilẹ .navko pẹlu eyikeyi .activeipinle. Awọn apẹẹrẹ atẹle pẹlu kilasi naa, ni pataki lati ṣafihan pe kilasi kan pato ko ṣe okunfa eyikeyi iselona pataki.

Lati fihan ipo ti nṣiṣe lọwọ si awọn imọ-ẹrọ iranlọwọ, lo aria-currentabuda — lilo pageiye fun oju-iwe lọwọlọwọ, tabi truefun ohun ti o wa lọwọlọwọ ninu eto kan.

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

Awọn kilasi ni a lo jakejado, nitorinaa isamisi rẹ le rọ pupọ. Lo <ul>s bii loke, <ol>ti aṣẹ awọn nkan rẹ ba ṣe pataki, tabi yi tirẹ pẹlu <nav>eroja kan. Nitori awọn .navlilo display: flex, awọn ọna asopọ nav huwa kanna bi awọn ohun nav yoo ṣe, ṣugbọn laisi ami iyasọtọ.

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

Awọn aṣa ti o wa

Yi awọn ara ti .navs paati pẹlu modifiers ati igbesi. Illa ati baramu bi o ti nilo, tabi kọ ara rẹ.

Petele titete

Yi titete petele ti nav rẹ pẹlu awọn ohun elo flexbox . Nipa aiyipada, awọn navs ti wa ni deede si apa osi, ṣugbọn o le ni rọọrun yi wọn pada si aarin tabi titọ ọtun.

Aarin pẹlu .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>

Ni ibamu-ọtun pẹlu .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>

Inaro

Ṣe akopọ lilọ kiri rẹ nipa yiyipada itọsọna ohun kan Flex pẹlu ohun .flex-columnelo naa. Nilo lati akopọ wọn lori diẹ ninu awọn iwo oju ṣugbọn kii ṣe awọn miiran? Lo awọn ẹya idahun (fun apẹẹrẹ, .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>

Gẹgẹbi nigbagbogbo, lilọ kiri inaro ṣee ṣe laisi <ul>s, paapaa.

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

Awọn taabu

Mu awọn nav ipilẹ lati oke ati afikun .nav-tabskilasi lati se ina kan tabbed ni wiwo. Lo wọn lati ṣẹda awọn agbegbe tabbable pẹlu wa taabu JavaScript itanna .

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

Awọn oogun

Mu HTML kanna, ṣugbọn lo .nav-pillsdipo:

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

Kun ati ki o da

Fi ipa mu .navawọn akoonu inu rẹ lati faagun ni kikun iwọn ti o wa ọkan ninu awọn kilasi modifier meji. Lati kun gbogbo aaye to wa ni iwọn pẹlu .nav-items rẹ, lo .nav-fill. Akiyesi pe gbogbo petele aaye ti wa ni ti tẹdo, sugbon ko gbogbo nav ohun kan ni o ni kanna iwọn.

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

Nigbati o ba nlo <nav>lilọ kiri-orisun, o le yọkuro lailewu .nav-itembi o ṣe .nav-linknilo nikan fun <a>awọn eroja aṣa.

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

Fun awọn eroja iwọn dogba, lo .nav-justified. Gbogbo aaye petele yoo gba nipasẹ awọn ọna asopọ nav, ṣugbọn ko dabi .nav-fillloke, gbogbo ohun nav yoo jẹ iwọn kanna.

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

Iru si .nav-fillapẹẹrẹ nipa lilo <nav>lilọ-orisun.

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

Nṣiṣẹ pẹlu Flex igbesi

Ti o ba nilo awọn iyatọ nav idahun, ronu nipa lilo lẹsẹsẹ awọn ohun elo flexbox . Lakoko ti ọrọ-ọrọ diẹ sii, awọn ohun elo wọnyi nfunni ni isọdi nla kọja awọn aaye ifasilẹ idahun. Ni awọn apẹẹrẹ ni isalẹ, nav wa yoo wa ni tolera lori awọn ni asuwon ti breakpoint, ki o si orisirisi si si a petele akọkọ ti o kun awọn iwọn ti o wa ti o bere lati kekere breakpoint.

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

Nipa wiwọle

Ti o ba nlo awọn navs lati pese ọpa lilọ kiri, rii daju lati ṣafikun kan role="navigation"si apoti obi ti oye julọ ti <ul>, tabi fi ipari si ohun <nav>kan ni ayika gbogbo lilọ kiri. Maṣe ṣafikun ipa naa si <ul>funrararẹ, nitori eyi yoo ṣe idiwọ lati kede bi atokọ gangan nipasẹ awọn imọ-ẹrọ iranlọwọ.

Ṣe akiyesi pe awọn ọpa lilọ kiri, paapaa ti oju ba ṣe aṣa bi awọn taabu pẹlu .nav-tabskilasi, ko yẹ ki o fun role="tablist", role="tab"tabi role="tabpanel"awọn abuda. Iwọnyi jẹ deede nikan fun awọn atọkun tabbed ti o ni agbara, bi a ti ṣe apejuwe rẹ ninu Awọn iṣe Onkọwe WAI ARIA . Wo JavaScript ihuwasi fun ìmúdàgba tabbed atọkun ni yi apakan fun apẹẹrẹ. Ẹya aria-currentnaa ko ṣe pataki lori awọn atọkun tabbed ti o ni agbara niwọn igba ti JavaScript wa mu ipo ti o yan nipa fifi kun aria-selected="true"lori taabu ti nṣiṣe lọwọ.

Lilo awọn dropdowns

Ṣafikun awọn akojọ aṣayan silẹ pẹlu HTML afikun diẹ ati awọn ohun itanna JavaScript awọn silẹ .

Awọn taabu pẹlu dropdowns

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

Ìşọmọbí pẹlu 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

Awọn oniyipada

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

JavaScript ihuwasi

Lo ohun itanna JavaScript taabu-pẹlu ẹyọkan tabi nipasẹ bootstrap.jsfaili ti a ṣajọpọ—lati faagun awọn taabu lilọ kiri wa ati awọn oogun lati ṣẹda awọn pane ti akoonu agbegbe.

Awọn atọkun tabbed ti o ni agbara, gẹgẹbi a ti ṣe apejuwe rẹ ninu Awọn Ilana Akọwe WAI ARIA , nilo role="tablist", role="tab", role="tabpanel", ati awọn aria-eroja afikun lati le sọ eto wọn, iṣẹ ṣiṣe ati ipo lọwọlọwọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ (gẹgẹbi awọn oluka iboju). Gẹgẹbi iṣe ti o dara julọ, a ṣeduro lilo <button>awọn eroja fun awọn taabu, nitori iwọnyi jẹ awọn idari ti o nfa iyipada agbara, dipo awọn ọna asopọ ti o lọ kiri si oju-iwe tuntun tabi ipo.

Ṣe akiyesi pe awọn atọkun tabbed ti o ni agbara ko yẹ ki o ni awọn akojọ aṣayan silẹ, nitori eyi fa mejeeji lilo ati awọn ọran iraye si. Lati irisi lilo, otitọ pe eroja okunfa taabu ti o han lọwọlọwọ ko han lẹsẹkẹsẹ (bi o ti wa ninu akojọ aṣayan silẹ pipade) le fa iporuru. Lati oju iwoye wiwọle, lọwọlọwọ ko si ọna ti o ni oye lati ṣe maapu iru ikole yii si apẹrẹ WAI ARIA boṣewa, afipamo pe ko le ṣe ni irọrun ni oye si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ.

Eyi jẹ diẹ ninu akoonu dimu ile akoonu ti o somọ. Tite taabu miiran yoo yi hihan eyi pada fun atẹle. Awọn taabu JavaScript yi awọn kilasi pada lati ṣakoso hihan akoonu ati iselona. O le lo pẹlu awọn taabu, awọn oogun, ati eyikeyi miiran .nav-agbara lilọ kiri.

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>

Lati ṣe iranlọwọ lati baamu awọn iwulo rẹ, eyi n ṣiṣẹ pẹlu <ul>isamisi-orisun, bi a ṣe han loke, tabi pẹlu isamisi “yi tirẹ” lainidii. Ṣe akiyesi pe ti o ba nlo <nav>, o ko yẹ ki o ṣafikun role="tablist"taara si rẹ, nitori eyi yoo dojui ipa abinibi eroja bi ami-ilẹ lilọ kiri. Dipo, yipada si ohun elo miiran (ni apẹẹrẹ ni isalẹ, rọrun <div>) ki o fi ipari si ni <nav>ayika rẹ.

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

Awọn itanna awọn taabu tun ṣiṣẹ pẹlu awọn oogun.

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

Ati pẹlu inaro ìşọmọbí.

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>

Lilo awọn abuda data

O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-bs-toggle="tab"tabi data-bs-toggle="pill"lori nkan kan. Lo awọn abuda data wọnyi lori .nav-tabstabi .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>

Nipasẹ JavaScript

Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

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

O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:

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

Ipa ipare

Lati jẹ ki awọn taabu rẹ wọ inu, ṣafikun .fadesi ọkọọkan .tab-pane. PAN taabu akọkọ gbọdọ tun ni .showlati jẹ ki akoonu ibẹrẹ han.

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

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

constructor

Mu eroja taabu ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-bs-targettabi, ti o ba nlo ọna asopọ kan href, abuda kan, ti o fojusi oju ipade apoti kan ninu 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>

ifihan

Yan taabu ti a fun ati ṣafihan PAN ti o somọ. Eyikeyi taabu miiran ti o ti yan tẹlẹ di aiyan ati pe iwe ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (ie ṣaaju ki shown.bs.tabiṣẹlẹ naa to waye).

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

  tab.show()

sọnù

Pa taabu eroja run.

gbaInstance

Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ taabu ti o ni nkan ṣe pẹlu nkan DOM kan

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

gbaOrCreateInstance

Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ taabu ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda ọkan tuntun ti ko ba ṣe ipilẹṣẹ

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

Awọn iṣẹlẹ

Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:

hide.bs.tab(lori taabu lọwọ lọwọlọwọ)
show.bs.tab(lori taabu ti yoo han)
hidden.bs.tab(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna fun hide.bs.tabiṣẹlẹ naa)
shown.bs.tab(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna fun show.bs.tabiṣẹlẹ naa)

Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, lẹhinna hide.bs.tabati awọn hidden.bs.tabiṣẹlẹ kii yoo jẹ ina.

Iru iṣẹlẹ	Apejuwe
`show.bs.tab`	Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo `event.target`ati `event.relatedTarget`lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) lẹsẹsẹ.
`shown.bs.tab`	Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo `event.target`ati `event.relatedTarget`lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) lẹsẹsẹ.
`hide.bs.tab`	Iṣẹlẹ yii n tan nigbati taabu tuntun yoo han (ati nitorinaa taabu ti nṣiṣe lọwọ tẹlẹ ni lati farapamọ). Lo `event.target`ati `event.relatedTarget`lati dojukọ taabu ti nṣiṣe lọwọ lọwọlọwọ ati taabu tuntun laipẹ-lati jẹ lọwọ, ni atele.
`hidden.bs.tab`	Iṣẹlẹ yii n tan lẹhin ti taabu tuntun ti han (ati nitorinaa taabu ti nṣiṣe lọwọ iṣaaju ti farapamọ). Lo `event.target`ati `event.relatedTarget`lati fojusi taabu ti nṣiṣe lọwọ iṣaaju ati taabu ti nṣiṣe lọwọ tuntun, lẹsẹsẹ.

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