Navs agus tabaichean

Sgrìobhainnean agus eisimpleirean airson mar a chleachdas tu co-phàirtean seòlaidh Bootstrap.

Air an duilleig seo

Bun nav

Bidh seòladh a tha ri fhaighinn ann am Bootstrap a’ roinn comharran coitcheann agus stoidhlichean, bhon bhun- .navchlas gu na stàitean gnìomhach agus ciorramach. Dèan iomlaid air clasaichean mion-atharrachaidh gus gluasad eadar gach stoidhle.

Tha am pàirt bunaiteach .navair a thogail le flexbox agus a’ toirt bunait làidir airson a h-uile seòrsa de cho-phàirtean seòlaidh a thogail. Tha e a’ toirt a-steach cuid de rudan a tha a’ dol thairis air stoidhle (airson obrachadh le liostaichean), cuid de phlugadh ceangail airson raointean a tha air am bualadh nas motha, agus stoidhle bunaiteach ciorramach.

.navChan eil am pàirt bunaiteach a’ toirt a-steach .activestaid sam bith. Tha na h-eisimpleirean a leanas a’ toirt a-steach a’ chlas, gu h-àraidh airson sealltainn nach eil an clas sònraichte seo a’ brosnachadh stoidhle sònraichte sam bith.

Gus an staid ghnìomhach a thoirt gu teicneòlasan cuideachail, cleachd am aria-currentfeart - a’ cleachdadh an pageluach airson duilleag gnàthach, no trueairson an rud gnàthach ann an seata.

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

Bithear a’ cleachdadh chlasaichean air feadh, agus mar sin faodaidh do chomharradh a bhith air leth sùbailte. Cleachd <ul>na rudan gu h-àrd, <ol>ma tha òrdugh nan nithean agad cudromach, no rolaich do chuid fhèin le <nav>eileamaid. Leis gu bheil na .navcleachdaidhean display: flex, bidh na ceanglaichean nav gan giùlan fhèin mar a bhiodh nithean nav, ach às aonais a’ chomharra a bharrachd.

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

Stoidhlichean rim faighinn

Atharraich stoidhle .navco-phàirt s le mion-atharraichean agus goireasan. Meudaich agus maids mar a dh ’fheumar, no tog do chuid fhèin.

Co-thaobhadh còmhnard

Atharraich co-thaobhadh còmhnard do nav le goireasan flexbox . Gu gnàthach, tha navs air an co-thaobhadh ris an taobh chlì, ach is urrainn dhut gu furasta an atharrachadh gu meadhan no co-thaobhadh deas.

Air a chuimseachadh le .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>

Co-thaobhadh ceart le .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>

Inghearach

Stack do sheòladh le bhith ag atharrachadh stiùireadh an nì flex leis a’ .flex-columnghoireas. Am feum thu an cruachadh air cuid de phuirt-seallaidh ach chan eil feadhainn eile? Cleachd na dreachan freagairteach (me, .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>

Mar as àbhaist, tha seòladh dìreach comasach às aonais <ul>s, cuideachd.

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

Tabaichean

A’ gabhail an nòs bunaiteach bho shuas agus a’ cur ris a’ .nav-tabschlas gus eadar-aghaidh tabaichte a chruthachadh. Cleachd iad gus roinnean tabable a chruthachadh leis a ’ plugan tab JavaScript againn .

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

Pills

Gabh an aon HTML sin, ach cleachd .nav-pillsan àite sin:

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

Lìon agus fìreanachadh

Thoir .navair na tha anns an t-susbaint agad an leud iomlan a leudachadh aon de dhà chlas mion-atharrachaidh. Gus a h-uile àite a tha ri fhaighinn a lìonadh leis na .nav-items agad, cleachd .nav-fill. Mothaich gu bheil a h-uile àite còmhnard air a chleachdadh, ach chan eil an aon leud aig a h-uile nì seòlaidh.

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

Nuair a bhios tu a’ cleachdadh <nav>seòladh stèidhichte, faodaidh tu fàgail a-mach gu sàbhailte .nav-itemmar a tha riatanach airson eileamaidean .nav-linkstoidhle .<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Airson eileamaidean de leud co-ionann, cleachd .nav-justified. Bidh a h-uile àite còmhnard air a ghabhail a-steach le ceanglaichean nav, ach eu-coltach ris na tha gu h- .nav-fillàrd, bidh gach nì seòlaidh den aon leud.

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

Coltach ris an .nav-filleisimpleir a 'cleachdadh <nav>seòladh stèidhichte.

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

Ag obair le flex utilities

Ma tha feum agad air atharrachaidhean freagairteach nav, smaoinich air a bhith a’ cleachdadh sreath de ghoireasan flexbox . Fhad ‘s a tha iad nas gnìomhaiche, tha na goireasan sin a’ tabhann barrachd gnàthachaidh thairis air puingean brisidh freagairteach. Anns an eisimpleir gu h-ìosal, bidh an inneal-seòlaidh againn air a chruachadh air a’ phuing-bhriseadh as ìsle, agus an uairsin atharraichidh e gu cruth còmhnard a lìonas an leud a tha ri fhaighinn a’ tòiseachadh bhon àite brisidh bheag.

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

A thaobh ruigsinneachd

Ma tha thu a’ cleachdadh navs gus bàr seòlaidh a sholarachadh, bi cinnteach gun cuir thu ris role="navigation"a’ ghobhar phàrant as loidsigeach den <ul>, no paisg <nav>eileamaid timcheall an t-seòlaidh gu lèir. Na cuir an dreuchd ris <ul>fhèin, oir chuireadh seo stad air bho bhith air ainmeachadh mar fhìor liosta le teicneòlasan taice.

Thoir an aire nach bu chòir , no buadhan a thoirt do bhàraichean seòlaidh, eadhon ged a tha iad air an ainmeachadh mar tabaichean leis a’ .nav-tabschlas . Chan eil iad sin iomchaidh ach airson eadar-aghaidh tabbed fiùghantach, mar a chaidh a mhìneachadh ann an Cleachdaidhean Ùghdarrachaidh WAI ARIA . Faic giùlan JavaScript airson eadar-aghaidh tabbed fiùghantach san roinn seo airson eisimpleir. Chan eil am feart riatanach air eadar-aghaidh tabbed fiùghantach leis gu bheil an JavaScript againn a’ làimhseachadh na stàite taghte le bhith a’ cur ris an taba gnìomhach.role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

A 'cleachdadh dropdowns

Cuir clàran-bìdh sìos le beagan HTML a bharrachd agus am plugan tuiteam-sìos JavaScript .

Tabaichean le 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

Caochlaidhean

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

Giùlan JavaScript

Cleachd am plugan tab JavaScript - cuir a-steach e leotha fhèin no tron bootstrap.jsfhaidhle cruinnichte - gus na tabaichean seòlaidh agus na pills againn a leudachadh gus panalan tabable de shusbaint ionadail a chruthachadh.

Feumaidh eadar-aghaidh tabbed fiùghantach, mar a chaidh a mhìneachadh ann an Cleachdaidhean Ùghdarrachaidh WAI ARIA , role="tablist", role="tab", role="tabpanel", agus aria-buadhan a bharrachd gus an structar, an comas-gnìomh agus an staid làithreach a thoirt do luchd-cleachdaidh teicneòlasan taice (leithid leughadairean sgrion). Mar chleachdadh as fheàrr, tha sinn a’ moladh <button>eileamaidean a chleachdadh airson nan tabaichean, oir is e smachdan a tha seo a bhrosnaicheas atharrachadh fiùghantach, seach ceanglaichean a bhios a’ seòladh gu duilleag no àite ùr.

Thoir an aire nach bu chòir clàran tuiteam-sìos a bhith ann an eadar-aghaidh tabbed fiùghantach , leis gu bheil seo ag adhbhrachadh duilgheadasan cleachdaidh agus ruigsinneachd. Bho shealladh cleachdaidh, faodaidh an fhìrinn nach eil eileamaid brosnachaidh an taba a tha air a thaisbeanadh an-dràsta ri fhaicinn sa bhad (leis gu bheil e taobh a-staigh a ’chlàr tuiteam-sìos dùinte) troimh-chèile adhbhrachadh. Bho thaobh ruigsinneachd, chan eil dòigh reusanta ann an-dràsta an seòrsa togail seo a mhapadh gu pàtran àbhaisteach WAI ARIA, a’ ciallachadh nach urrainn dha a bhith furasta a thuigsinn do luchd-cleachdaidh theicneòlasan taice.

Seo cuid de shusbaint neach-àite an t-susbaint a tha co-cheangailte ris an taba Dachaigh. Ma bhriogas tu air taba eile togaidh tu faicsinneachd an tè seo airson an ath fhear. Bidh an tab JavaScript ag atharrachadh chlasaichean gus smachd a chumail air faicsinneachd susbaint agus stoidhle. Faodaidh tu a chleachdadh le tabaichean, pills, agus .navseòladh le cumhachd sam bith eile.

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>

Gus cuideachadh le bhith a’ freagairt air na feumalachdan agad, bidh seo ag obair le <ul>comharradh stèidhichte, mar a chithear gu h-àrd, no le comharradh neo-riaghailteach “rol do chuid fhèin”. Thoir an aire ma tha thu a’ cleachdadh <nav>, cha bu chòir dhut cur ris role="tablist"gu dìreach, oir bhiodh seo a’ dol thairis air àite dùthchasach an eileamaid mar chomharra-tìre seòlaidh. An àite sin, gluais gu eileamaid eile (san eisimpleir gu h-ìosal, sìmplidh <div>) agus cuir <nav>timcheall air.

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

Bidh am plugan tabaichean cuideachd ag obair le pills.

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

Agus le pills dìreach.

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>

A’ cleachdadh feartan dàta

Faodaidh tu seòladh taba no pill a chuir an gnìomh gun JavaScript sam bith a sgrìobhadh le bhith dìreach a’ sònrachadh data-bs-toggle="tab"no data-bs-toggle="pill"air eileamaid. Cleachd na buadhan dàta seo air .nav-tabsno .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>

Air sgàth javascript

Dèan comas air tabaichean tabable tro JavaScript (feumaidh gach taba a chuir an gnìomh leotha fhèin):

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

Faodaidh tu tabaichean fa leth a chuir an gnìomh ann an grunn dhòighean:

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

A 'bhuaidh a dh' fhalbh

Gus toirt air tabaichean a dhol a-steach, cuir .faderis gach .tab-pane. Feumaidh a’ chiad phana taba cuideachd .showan susbaint tùsail a dhèanamh follaiseach.

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

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .

constructor

Cuir an gnìomh eileamaid tab agus inneal susbaint. Bu chòir gum biodh an dàrna cuid data-bs-targetno, ma tha iad a’ cleachdadh ceangal, hreffeart, ag amas air nód soithich anns an 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>

seall

Tagh an taba a chaidh a thoirt seachad agus seallaidh e am pana co-cheangailte ris. Bidh taba sam bith eile a chaidh a thaghadh roimhe gun a bhith air a thaghadh agus tha am pana co-cheangailte ris falaichte. Tillidh e chun neach-fios mus deach am pana taba a shealltainn (ie mus tachair an shown.bs.tabtachartas).

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

  tab.show()

cuidhteas

A 'sgrios tab eileamaid.

faighinn a-steach

Dòigh statach a leigeas leat an eisimpleir tab fhaighinn co-cheangailte ri eileamaid DOM

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

faighOrCreateInstance

Dòigh statach a leigeas leat eisimpleir an taba fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh

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

Tachartasan

Nuair a sheallas tu taba ùr, bidh na tachartasan a’ losgadh san òrdugh a leanas:

hide.bs.tab(air an taba gnìomhach làithreach)
show.bs.tab(air an taba a tha ri fhaicinn)
hidden.bs.tab(air an taba gnìomhach roimhe, an aon fhear ris an hide.bs.tabtachartas)
shown.bs.tab(air an taba a tha dìreach air a thaisbeanadh gu gnìomhach, an aon fhear ris an show.bs.tabtachartas)

Mura robh taba gnìomhach mu thràth, cha tèid na tachartasan hide.bs.tabagus na tachartasan a chuir às.hidden.bs.tab

Seòrsa tachartas	Tuairisgeul
`show.bs.tab`	Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
`shown.bs.tab`	Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
`hide.bs.tab`	Bidh an tachartas seo a’ losgadh nuair a tha taba ùr gu bhith air a shealltainn (agus mar sin tha an taba gnìomhach roimhe gu bhith falaichte). Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach gnàthach agus an taba ùr a dh’ aithghearr gu bhith gnìomhach, fa leth.
`hidden.bs.tab`	Bidh an tachartas seo a’ losgadh às deidh taba ùr a nochdadh (agus mar sin tha an taba gnìomhach roimhe falaichte). Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach roimhe agus an taba gnìomhach ùr, fa leth.

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