Langkau ke kandungan utama Langkau ke navigasi dokumen
in English

Navs dan tab

Dokumentasi dan contoh cara menggunakan komponen navigasi yang disertakan Bootstrap.

Pada halaman ini

Nav

Navigasi tersedia dalam Bootstrap berkongsi markup dan gaya umum, daripada .navkelas asas kepada keadaan aktif dan dilumpuhkan. Tukar kelas pengubah suai untuk bertukar antara setiap gaya.

Komponen asas .navdibina dengan flexbox dan menyediakan asas yang kukuh untuk membina semua jenis komponen navigasi. Ia termasuk beberapa penggantian gaya (untuk bekerja dengan senarai), beberapa padding pautan untuk kawasan hit yang lebih besar dan penggayaan asas yang dilumpuhkan.

Komponen asas .navtidak termasuk mana-mana .activekeadaan. Contoh berikut termasuk kelas, terutamanya untuk menunjukkan bahawa kelas tertentu ini tidak mencetuskan sebarang penggayaan khas.

Untuk menyampaikan keadaan aktif kepada teknologi bantuan, gunakan aria-currentatribut — menggunakan pagenilai untuk halaman semasa atau trueuntuk item semasa dalam set.

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

Kelas digunakan sepanjang masa, jadi markup anda boleh menjadi sangat fleksibel. Gunakan <ul>s seperti di atas, <ol>jika susunan item anda penting, atau gulung sendiri dengan <nav>elemen. Kerana .navkegunaan display: flex, pautan nav berkelakuan sama seperti item nav, tetapi tanpa penanda tambahan.

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

Gaya yang tersedia

Tukar gaya .navkomponen s dengan pengubah suai dan utiliti. Campurkan dan padankan mengikut keperluan, atau bina sendiri.

Penjajaran mendatar

Tukar penjajaran mendatar navigasi anda dengan utiliti flexbox . Secara lalai, nav dijajar ke kiri, tetapi anda boleh menukarnya dengan mudah ke dijajar tengah atau kanan.

Berpusat dengan .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>

Dijajarkan ke kanan dengan .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>

Menegak

Susun navigasi anda dengan menukar arah item flex dengan .flex-columnutiliti. Perlu menyusunnya pada beberapa port pandangan tetapi tidak pada yang lain? Gunakan versi responsif (cth, .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>

Seperti biasa, navigasi menegak boleh dilakukan tanpa <ul>s juga.

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

Tab

Mengambil nav asas dari atas dan menambah .nav-tabskelas untuk menjana antara muka tab. Gunakannya untuk mencipta kawasan boleh tab dengan pemalam JavaScript tab kami .

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

Pil

Ambil HTML yang sama, tetapi gunakan .nav-pills:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Isi dan justifikasikan

Paksa .navkandungan anda untuk memanjangkan lebar penuh tersedia satu daripada dua kelas pengubah suai. Untuk mengisi semua ruang yang ada secara berkadar dengan .nav-items anda, gunakan .nav-fill. Perhatikan bahawa semua ruang mendatar diduduki, tetapi tidak setiap item nav mempunyai lebar yang sama.

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

Apabila menggunakan <nav>navigasi berasaskan, anda boleh meninggalkan dengan selamat .nav-itemkerana hanya .nav-linkdiperlukan untuk <a>elemen penggayaan.

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

Untuk elemen yang sama lebar, gunakan .nav-justified. Semua ruang mendatar akan diduduki oleh pautan navigasi, tetapi tidak seperti di .nav-fillatas, setiap item navigasi akan mempunyai lebar yang sama.

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

Sama seperti .nav-fillcontoh menggunakan <nav>navigasi berasaskan.

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

Bekerja dengan utiliti fleksibel

Jika anda memerlukan variasi navigasi responsif, pertimbangkan untuk menggunakan satu siri utiliti flexbox . Walaupun lebih bertele-tele, utiliti ini menawarkan penyesuaian yang lebih besar merentas titik putus responsif. Dalam contoh di bawah, nav kami akan disusun pada titik putus terendah, kemudian menyesuaikan diri dengan susun atur mendatar yang mengisi lebar yang tersedia bermula dari titik putus kecil.

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

Berkenaan kebolehcapaian

Jika anda menggunakan navs untuk menyediakan bar navigasi, pastikan anda menambahkan a role="navigation"pada bekas induk yang paling logik bagi <ul>, atau balut <nav>elemen di sekeliling keseluruhan navigasi. Jangan tambah peranan pada <ul>dirinya sendiri, kerana ini akan menghalangnya daripada diumumkan sebagai senarai sebenar oleh teknologi bantuan.

Ambil perhatian bahawa bar navigasi, walaupun digayakan secara visual sebagai tab dengan .nav-tabskelas, tidak boleh diberikan role="tablist", role="tab"atau role="tabpanel"atribut. Ini hanya sesuai untuk antara muka tab dinamik, seperti yang diterangkan dalam Amalan Pengarangan WAI ARIA . Lihat tingkah laku JavaScript untuk antara muka tab dinamik dalam bahagian ini sebagai contoh. Atribut aria-currenttidak diperlukan pada antara muka tab dinamik kerana JavaScript kami mengendalikan keadaan yang dipilih dengan menambah aria-selected="true"pada tab aktif.

Menggunakan dropdown

Tambahkan menu lungsur turun dengan sedikit HTML tambahan dan pemalam JavaScript lungsur turun .

Tab dengan lungsur turun

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

Pil dengan dropdown

<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

Pembolehubah

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

Tingkah laku JavaScript

Gunakan pemalam JavaScript tab—masukkannya secara individu atau melalui bootstrap.jsfail yang disusun—untuk memanjangkan tab dan pil navigasi kami untuk mencipta anak tetingkap boleh tab bagi kandungan tempatan.

Antara muka tab dinamik, seperti yang diterangkan dalam Amalan Pengarangan WAI ARIA , memerlukan role="tablist", role="tab", role="tabpanel", dan aria-atribut tambahan untuk menyampaikan struktur, fungsi dan keadaan semasanya kepada pengguna teknologi bantuan (seperti pembaca skrin). Sebagai amalan terbaik, kami mengesyorkan menggunakan <button>elemen untuk tab, kerana ini adalah kawalan yang mencetuskan perubahan dinamik, dan bukannya pautan yang menavigasi ke halaman atau lokasi baharu.

Ambil perhatian bahawa antara muka tab dinamik tidak seharusnya mengandungi menu lungsur, kerana ini menyebabkan masalah kebolehgunaan dan kebolehaksesan. Dari perspektif kebolehgunaan, fakta bahawa elemen pencetus tab yang dipaparkan pada masa ini tidak kelihatan serta-merta (kerana ia berada di dalam menu lungsur turun tertutup) boleh menyebabkan kekeliruan. Dari sudut kebolehaksesan, pada masa ini tiada cara yang munasabah untuk memetakan konstruk jenis ini kepada corak WAI ARIA standard, bermakna ia tidak boleh difahami dengan mudah oleh pengguna teknologi bantuan.

Ini ialah beberapa kandungan pemegang tempat kandungan berkaitan tab Laman Utama. Mengklik tab lain akan menogol keterlihatan tab ini untuk yang seterusnya. Tab JavaScript menukar kelas untuk mengawal keterlihatan kandungan dan gaya. Anda boleh menggunakannya dengan tab, pil dan mana-mana .navnavigasi berkuasa lain.

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>

Untuk membantu memenuhi keperluan anda, ini berfungsi dengan <ul>penanda berasaskan, seperti yang ditunjukkan di atas, atau dengan sebarang penanda "gulungkan anda sendiri" sewenang-wenangnya. Ambil perhatian bahawa jika anda menggunakan <nav>, anda tidak sepatutnya menambah role="tablist"terus padanya, kerana ini akan mengatasi peranan asli elemen sebagai tanda tempat navigasi. Sebaliknya, tukar kepada elemen alternatif (dalam contoh di bawah, yang mudah <div>) dan bungkus di <nav>sekelilingnya.

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

Pemalam tab juga berfungsi dengan pil.

Ini ialah beberapa kandungan pemegang tempat kandungan berkaitan tab Laman Utama. Mengklik tab lain akan menogol keterlihatan tab ini untuk yang seterusnya. Tab JavaScript menukar kelas untuk mengawal keterlihatan kandungan dan gaya. Anda boleh menggunakannya dengan tab, pil dan mana-mana .navnavigasi berkuasa lain.

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

Dan dengan pil menegak.

Ini ialah beberapa kandungan pemegang tempat kandungan berkaitan tab Laman Utama. Mengklik tab lain akan menogol keterlihatan tab ini untuk yang seterusnya. Tab JavaScript menukar kelas untuk mengawal keterlihatan kandungan dan gaya. Anda boleh menggunakannya dengan tab, pil dan mana-mana .navnavigasi berkuasa lain.

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

Menggunakan atribut data

Anda boleh mengaktifkan navigasi tab atau pil tanpa menulis sebarang JavaScript dengan hanya menyatakan data-bs-toggle="tab"atau data-bs-toggle="pill"pada elemen. Gunakan atribut data ini pada .nav-tabsatau .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>

Melalui JavaScript

Dayakan tab boleh tab melalui JavaScript (setiap tab perlu diaktifkan secara individu):

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

Anda boleh mengaktifkan tab individu dalam beberapa cara:

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

Kesan pudar

Untuk membuat tab pudar, tambahkan .fadepada setiap .tab-pane. Anak tetingkap tab pertama juga mesti perlu .showmembuat kandungan awal kelihatan.

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

Kaedah

Kaedah dan peralihan tak segerak

Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .

Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut .

constructor

Mengaktifkan elemen tab dan bekas kandungan. Tab harus mempunyai sama ada data-bs-targetatau, jika menggunakan pautan, hrefatribut, menyasarkan nod bekas dalam 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>

tunjuk

Memilih tab yang diberikan dan menunjukkan anak tetingkap yang berkaitan. Mana-mana tab lain yang sebelum ini dipilih menjadi tidak dipilih dan anak tetingkap berkaitannya disembunyikan. Kembali kepada pemanggil sebelum anak tetingkap tab sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.tabperistiwa berlaku).

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

  tab.show()

buang

Memusnahkan tab elemen.

getInstance

Kaedah statik yang membolehkan anda mendapatkan contoh tab yang dikaitkan dengan elemen DOM

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

getOrCreateInstance

Kaedah statik yang membolehkan anda mendapatkan contoh tab yang dikaitkan dengan elemen DOM atau mencipta yang baharu sekiranya ia tidak dimulakan

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

Peristiwa

Apabila menunjukkan tab baharu, peristiwa berlaku dalam susunan berikut:

  1. hide.bs.tab(pada tab aktif semasa)
  2. show.bs.tab(pada tab yang akan ditunjukkan)
  3. hidden.bs.tab(pada tab aktif sebelumnya, sama seperti untuk hide.bs.tabacara)
  4. shown.bs.tab(pada tab yang baru aktif ditunjukkan, sama seperti untuk show.bs.tabacara itu)

Jika tiada tab sudah aktif, maka acara hide.bs.tabdan hidden.bs.tabtidak akan dicetuskan.

Jenis acara Penerangan
show.bs.tab Peristiwa ini berlaku pada rancangan tab, tetapi sebelum tab baharu dipaparkan. Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
shown.bs.tab Peristiwa ini berlaku pada rancangan tab selepas tab ditunjukkan. Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
hide.bs.tab Peristiwa ini berlaku apabila tab baharu hendak ditunjukkan (dan dengan itu tab aktif sebelumnya akan disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif semasa dan tab baru yang akan aktif, masing-masing.
hidden.bs.tab Peristiwa ini berlaku selepas tab baharu ditunjukkan (dan dengan itu tab aktif sebelumnya disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif sebelumnya dan tab aktif baharu, masing-masing. 
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
})