Navs a me nā papa

Nā palapala a me nā laʻana no ka hoʻohana ʻana i nā ʻāpana hoʻokele i hoʻokomo ʻia o Bootstrap.

Ma kēia ʻaoʻao

Base nav

Loaʻa ka hoʻokele ma Bootstrap i ka hōʻailona maʻamau a me nā ʻano, mai ka papa kumu .nava i nā mokuʻāina ikaika a me nā mea kīnā. E hoʻololi i nā papa hoʻololi e hoʻololi i waena o kēlā me kēia ʻano.

Kūkulu .navʻia ka ʻāpana kumu me ka flexbox a hāʻawi i kahi kumu ikaika no ke kūkulu ʻana i nā ʻano mea hoʻokele āpau. Loaʻa iā ia kekahi mau kāʻili ʻana (no ka hana ʻana me nā papa inoa), kekahi mau loulou loulou no nā wahi pā nui aʻe, a me ke kāʻei kino kīnā.

.navʻAʻole komo ka ʻāpana kumu i kekahi .activemokuʻāina. Aia nā laʻana ma lalo nei i ka papa, ʻo ka mea nui e hōʻike ana ʻaʻole i hoʻomaka kēia papa kūikawā i kekahi styling kūikawā.

No ka lawe ʻana i ke kūlana hana i nā ʻenehana kōkua, e hoʻohana i ke aria-currentʻano - me ka hoʻohana ʻana i ka pagewaiwai no ka ʻaoʻao o kēia manawa, a i ʻole trueno ka mea o kēia manawa i kahi pūʻulu.

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

Hoʻohana ʻia nā papa a puni, no laila hiki ke maʻalahi kāu markup. E hoʻohana <ul>i nā mea e like me luna, <ol>inā he mea nui ka hoʻonohonoho ʻana o kāu mau mea, a i ʻole e ʻōwili iā ʻoe iho me kahi <nav>mea. Ma muli o ka .navhoʻohana ʻana display: flex, e hana like nā loulou nav me nā mea nav, akā me ka ʻole o ka hōʻailona ʻokoʻa.

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

Loaʻa nā ʻano

Hoʻololi i ke ʻano o .navka ʻāpana me nā mea hoʻololi a me nā pono hana. Hoʻohui a hoʻohālikelike e like me ka mea e pono ai, a i ʻole e kūkulu i kāu ponoʻī.

Hoʻopololei hoʻopololei

E hoʻololi i ka hoʻopololei ʻāpae o kāu nav me nā pono hana flexbox . ʻO ka mea paʻamau, hoʻopaʻa ʻia nā navs ma ka hema, akā hiki iā ʻoe ke hoʻololi iā lākou i waena a i ʻole pololei.

Kūwaena me .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>

Kūlike ʻākau me .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>

Kū pololei

E hoʻopaʻa i kāu hoʻokele ma ka hoʻololi ʻana i ke kuhikuhi kikoʻī me ka .flex-columnpono. Pono e hoʻopaʻa iā lākou ma kekahi mau viewports akā ʻaʻole nā mea ʻē aʻe? E hoʻohana i nā mana pane (e laʻa, .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>

E like me nā manawa a pau, hiki ke hoʻokele kuʻekuʻe me ka ʻole <ul>o s.

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

Nā papa

Lawe i ka nav maʻamau mai luna mai a hoʻohui i ka .nav-tabspapa e hana i kahi kikowaena tabbed. E hoʻohana iā lākou e hana i nā ʻāpana tabable me kā mākou papa 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>

Pills

E lawe i kēlā HTML like, akā e hoʻohana .nav-pillsma kahi:

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

Hoopiha a hoapono

E hoʻoikaika i kāu .navmau mea e hoʻonui i ka laula piha i loaʻa i kekahi o nā papa hoʻololi ʻelua. No ka hoʻopiha piha ʻana i nā wahi āpau i loaʻa me kāu .nav-items, e hoʻohana i ka .nav-fill. E hoʻomaopopo i ka noho ʻana o nā wahi ākea āpau, akā ʻaʻole like ka laulā o kēlā me kēia mea nav.

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

I ka hoʻohana ʻana i kahi <nav>hoʻokele -based, hiki iā ʻoe ke haʻalele me ka palekana e .nav-itemlike me ka mea .nav-linke pono ai no nā mea hoʻonaninani <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>

No nā mea like-ākea, hoʻohana .nav-justified. E noho ʻia nā wahi ākea āpau e nā loulou nav, akā ʻaʻole like me ka mea i .nav-fillluna, e like ka laulā o kēlā me kēia mea nav.

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

E like me ka .nav-filllaʻana e hoʻohana ana i kahi <nav>hoʻokele -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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Ke hana nei me nā pono hana maʻalahi

Inā makemake ʻoe i nā ʻano hoʻololi nav pane, e noʻonoʻo e hoʻohana i kahi pūʻulu o nā pono hana flexbox . ʻOiai ʻoi aku ka verbose, hāʻawi kēia mau mea pono i ka hana maʻamau ma waena o nā breakpoints pane. Ma ka laʻana ma lalo nei, e hoʻopaʻa ʻia kā mākou nav ma ka haʻahaʻa haʻahaʻa loa, a laila e hoʻololi i kahi hoʻonohonoho hoʻolālā e hoʻopiha i ka laula i loaʻa e hoʻomaka ana mai ka haʻihaʻi liʻiliʻi.

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

E pili ana i ka hiki

Inā ʻoe e hoʻohana nei i nā navs no ka hoʻolako ʻana i kahi pae hoʻokele, e hōʻoia e hoʻohui i kahi role="navigation"i ka pahu makua kūpono loa o ka <ul>, a i ʻole e hoʻopili i kahi <nav>mea a puni ka hoʻokele holoʻokoʻa. Mai hoʻohui i ke kuleana iā <ul>ia iho, no ka mea e pale ʻia ia mai ka hoʻolaha ʻia ʻana he papa inoa maoli e nā ʻenehana kōkua.

E hoʻomanaʻo, ʻaʻole pono e hāʻawi ʻia nā pahu hoʻokele, ʻoiai inā ʻike ʻia e like me nā tab me ka .nav-tabspapa, a i ʻole nā hiʻohiʻona . He mea kūpono wale nō kēia no nā ʻaoʻao i hoʻopaʻa ʻia, e like me ka wehewehe ʻana ma ka WAI ARIA Authoring Practices . E ʻike i ke ʻano JavaScript no nā ʻaoʻao i hoʻopaʻa ʻia ma kēia ʻāpana no kahi laʻana. ʻAʻole pono ke ʻano ma nā ʻaoʻao i hoʻopaʻa ʻia no ka mea ua mālama kā mākou JavaScript i ka mokuʻāina i koho ʻia ma ka hoʻohui ʻana i ka pā hana.role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Ke hoʻohana nei i nā hāʻule iho

Hoʻohui i nā menus dropdown me kahi HTML hou aʻe a me ka plugin JavaScript dropdowns .

Nā papa me nā hāʻule iho

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

ʻO nā pila me nā hāʻule iho

<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

Nā mea hoʻololi

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

ʻO ka hana JavaScript

E hoʻohana i ka plugin JavaScript tab—e hoʻokomo iā ia i kēlā me kēia a i ʻole ma o ka bootstrap.jsfaila i hōʻuluʻulu ʻia—e hoʻonui i kā mākou mau ʻaoʻao hoʻokele a me nā pila no ka hana ʻana i nā pane tabable o ka ʻike kūloko.

ʻO nā mea hoʻohana i hoʻopaʻa ʻia, e like me ia i wehewehe ʻia ma ka WAI ARIA Authoring Practices , pono role="tablist", role="tab", role="tabpanel", a me nā ʻano ʻē aʻe aria-i mea e hōʻike ai i ko lākou ʻano, hana a me ke kūlana o kēia manawa i nā mea hoʻohana i nā ʻenehana kōkua (e like me nā mea heluhelu pale). Ma ke ʻano he hoʻomaʻamaʻa maikaʻi loa, paipai mākou e hoʻohana i <button>nā mea no nā tabs, no ka mea he mau mana kēia e hoʻomaka ai i kahi loli ikaika, ma mua o nā loulou e hoʻokele i kahi ʻaoʻao hou a i ʻole wahi.

E hoʻomanaʻo, ʻaʻole pono e loaʻa nā menus hoʻoheheʻe ʻia i loko o nā papa kuhikuhi hoʻolalelale, no ka mea ke kumu kēia i nā pilikia hoʻohana a me ka hiki. Mai kahi hiʻohiʻona hoʻohana, ʻaʻole ʻike koke ʻia ka mea hoʻomaka o ka tab i hōʻike ʻia i kēia manawa (no ka mea aia i loko o ka papa kuhikuhi i pani ʻia) hiki ke huikau. Mai ka manaʻo hiki ke hiki, ʻaʻohe ala kūpono i kēia manawa e palapala i kēia ʻano hana i kahi maʻamau WAI ARIA maʻamau, ʻo ia hoʻi ʻaʻole hiki ke hoʻomaopopo maʻalahi i nā mea hoʻohana i nā ʻenehana kōkua.

ʻO kēia kekahi maʻiʻo placeholder ka ʻikepili pili o ka Home tab. Ke kaomi ʻana i kahi ʻaoʻao ʻē aʻe e hoʻololi i ka ʻike o kēia no ka mea aʻe. Hoʻololi ka ʻaoʻao JavaScript i nā papa e hoʻomalu i ka ʻike ʻike a me ke ʻano. Hiki iā ʻoe ke hoʻohana iā ia me nā tabs, pill, a me nā .navhoʻokele mana ʻē aʻe.

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>

No ke kōkua ʻana i kāu mau pono, hana kēia me ka <ul>markup -based, e like me ka mea i hōʻike ʻia ma luna, a i ʻole me kekahi markup "roll your own". E hoʻomanaʻo, inā ʻoe e hoʻohana nei i ka <nav>, ʻaʻole pono ʻoe e hoʻohui role="tablist"pololei iā ia, no ka mea, e hoʻopau kēia i ke kuleana maoli o ka mea ma ke ʻano he ʻāina hoʻokele. Akā, e hoʻololi i kahi mea ʻē aʻe (ma ka laʻana ma lalo nei, kahi maʻalahi <div>) a ʻōwili a <nav>puni ia.

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

Hoʻohana pū ka plugin tabs me nā pila.

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

A me nā lāʻau kūpaʻa.

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>

Ke hoʻohana nei i nā ʻano ʻikepili

Hiki iā ʻoe ke hoʻoikaika i ka ʻaoʻao a i ʻole ka hoʻokele pila me ka kākau ʻole ʻana i kekahi JavaScript ma ke kuhikuhi wale ʻana a i data-bs-toggle="tab"ʻole data-bs-toggle="pill"ma kahi mea. E hoʻohana i kēia mau ʻano ʻikepili ma a i .nav-tabsʻole .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>

Ma o JavaScript

E hoʻā i nā ʻaoʻao papa ma o JavaScript (pono e hoʻāla ʻia kēlā me kēia ʻaoʻao):

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

Hiki iā ʻoe ke hoʻāla i nā pā pākahi ma nā ʻano he nui:

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

Ka hopena mae

No ka hoʻopau ʻana i nā tabs, hoʻohui .fadei kēlā me kēia .tab-pane. Pono ka pane ʻaoʻao mua e ʻike .showi ka ʻike mua.

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

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

constructor

Ho'ā i ka ʻeleʻele tab a me ka ipu maʻiʻo. Pono ka Tab i kahi a i data-bs-targetʻole, inā e hoʻohana ana i kahi loulou, kahi hrefhiʻohiʻona, e huli ana i kahi pahu pahu i ka 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>

hōʻike

Koho i ka pā i hāʻawi ʻia a hōʻike i kāna pane pili. ʻAʻole i koho ʻia kekahi ʻaoʻao ʻē aʻe i koho mua ʻia a hūnā ʻia kāna pane pili. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka pane tab (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.tabhanana).

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

  tab.show()

e hoolei aku

Hoʻopau i ka pā o kahi mea.

getInstance

ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana tab i pili me kahi mea DOM

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

getOrCreateInstance

ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana tab i pili me kahi mea DOM, a i ʻole e hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.

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

Nā hanana

I ka hōʻike ʻana i kahi ʻaoʻao hou, e ʻā nā hanana ma ke ʻano penei:

hide.bs.tab(ma ka papa hana o kēia manawa)
show.bs.tab(ma ka ʻaoʻao e hōʻike ʻia)
hidden.bs.tab(ma ka papa hana mua, e like me ka hide.bs.tabhanana)
shown.bs.tab(ma ka ʻaoʻao hou i hōʻike ʻia, e like me ka show.bs.tabhanana)

Inā ʻaʻohe papa i hana mua ʻia, ʻaʻole e puhi ʻia nā hanana hide.bs.taba me nā hanana.hidden.bs.tab

ʻAno hanana	wehewehe
`show.bs.tab`	Hoʻomaka kēia hanana ma ka hōʻike pā, akā ma mua o ka hōʻike ʻia ʻana o ka pā hou. E hoʻohana `event.target`a `event.relatedTarget`e hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
`shown.bs.tab`	Hoʻomaka kēia hanana ma ka hōʻike pā ma hope o ka hōʻike ʻia ʻana o kahi pā. E hoʻohana `event.target`a `event.relatedTarget`e hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
`hide.bs.tab`	Ke ahi kēia hanana i ka wā e hōʻike ʻia ai kahi pā hou (a no laila e hūnā ʻia ka pā hana mua). E hoʻohana `event.target`a `event.relatedTarget`e hoʻopaʻa i ka ʻaoʻao ʻeleu o kēia manawa a me ka ʻaoʻao koke-e-ʻeleu hou.
`hidden.bs.tab`	Ke ahi kēia hanana ma hope o ka hōʻike ʻia ʻana o kahi pā hou (a no laila ua hūnā ʻia ka pā hana mua). E hoʻohana `event.target`a `event.relatedTarget`e hoʻopaʻa i ka papa hana mua a me ka pā hana hou.

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