Lewati ke konten utama Lewati ke navigasi dokumen
in English

Nav dan tab

Dokumentasi dan contoh cara menggunakan komponen navigasi yang disertakan pada Bootstrap.

Di halaman ini

Base nav

Navigasi yang tersedia di Bootstrap berbagi markup dan gaya umum, dari .navkelas dasar hingga status aktif dan nonaktif. Tukar kelas pengubah untuk beralih di antara setiap gaya.

Komponen dasar .navdibangun dengan flexbox dan memberikan fondasi yang kuat untuk membangun semua jenis komponen navigasi. Ini mencakup beberapa penggantian gaya (untuk bekerja dengan daftar), beberapa bantalan tautan untuk area hit yang lebih besar, dan gaya dasar yang dinonaktifkan.

Komponen dasar .navtidak menyertakan .activestatus apa pun. Contoh berikut menyertakan kelas, terutama untuk menunjukkan bahwa kelas khusus ini tidak memicu gaya khusus apa pun.

Untuk menyampaikan status aktif ke teknologi bantu, gunakan aria-currentatribut — menggunakan pagenilai untuk halaman saat ini, atau trueuntuk item saat ini dalam satu 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Kelas digunakan di seluruh, sehingga markup Anda bisa sangat fleksibel. Gunakan <ul>s seperti di atas, <ol>jika urutan item Anda penting, atau gulung sendiri dengan <nav>elemen. Karena .navkegunaan display: flex, tautan nav berperilaku sama seperti item nav, tetapi tanpa markup 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Gaya yang tersedia

Ubah gaya .navkomponen s dengan pengubah dan utilitas. Campur dan cocokkan sesuai kebutuhan, atau buat sendiri.

Perataan horizontal

Ubah perataan horizontal nav Anda dengan utilitas flexbox . Secara default, navigasi rata kiri, tetapi Anda dapat dengan mudah mengubahnya menjadi rata tengah atau kanan.

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

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

Vertikal

Tumpuk navigasi Anda dengan mengubah arah item fleksibel dengan .flex-columnutilitas. Perlu menumpuknya di beberapa viewport tetapi tidak di yang lain? Gunakan versi responsif (mis., .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>

Seperti biasa, navigasi vertikal juga dimungkinkan tanpa <ul>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>

tab

Mengambil navigasi dasar dari atas dan menambahkan .nav-tabskelas untuk menghasilkan antarmuka tab. Gunakan mereka untuk membuat wilayah tab dengan plugin 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

pil

Ambil HTML yang sama, tetapi gunakan .nav-pillssebagai gantinya:

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

Isi dan beri alasan

Paksa .navkonten Anda untuk memperluas lebar penuh yang tersedia salah satu dari dua kelas pengubah. Untuk mengisi semua ruang yang tersedia secara proporsional dengan .nav-items Anda, gunakan .nav-fill. Perhatikan bahwa semua ruang horizontal ditempati, tetapi tidak setiap item navigasi memiliki 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Saat menggunakan <nav>navigasi berbasis, Anda dapat dengan aman menghilangkannya .nav-itemkarena hanya .nav-linkdiperlukan untuk <a>elemen gaya.

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

Untuk elemen dengan lebar yang sama, gunakan .nav-justified. Semua ruang horizontal akan ditempati oleh tautan nav, tetapi tidak seperti di .nav-fillatas, setiap item nav akan memiliki 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Mirip dengan .nav-fillcontoh menggunakan <nav>navigasi berbasis.

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

Bekerja dengan utilitas fleksibel

Jika Anda memerlukan variasi navigasi responsif, pertimbangkan untuk menggunakan serangkaian utilitas flexbox . Meskipun lebih bertele-tele, utilitas ini menawarkan penyesuaian yang lebih besar di seluruh breakpoint responsif. Pada contoh di bawah ini, nav kita akan ditumpuk pada breakpoint terendah, kemudian beradaptasi dengan layout horizontal yang mengisi lebar yang tersedia mulai dari breakpoint 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Mengenai aksesibilitas

Jika Anda menggunakan navs untuk menyediakan bilah navigasi, pastikan untuk menambahkan a role="navigation"ke wadah induk paling logis dari <ul>, atau bungkus <nav>elemen di seluruh navigasi. Jangan menambahkan peran <ul>itu sendiri, karena ini akan mencegahnya diumumkan sebagai daftar aktual oleh teknologi bantu.

Perhatikan bahwa bilah navigasi, meskipun secara visual ditata sebagai tab dengan .nav-tabskelas, tidak boleh diberikan role="tablist", role="tab"atau role="tabpanel"atribut. Ini hanya sesuai untuk antarmuka tab dinamis, seperti yang dijelaskan dalam Praktik Penulisan WAI ARIA . Lihat perilaku JavaScript untuk antarmuka tab dinamis di bagian ini sebagai contoh. Atribut aria-currenttidak diperlukan pada antarmuka tab dinamis karena JavaScript kami menangani status yang dipilih dengan menambahkan aria-selected="true"pada tab aktif.

Menggunakan dropdown

Tambahkan menu dropdown dengan sedikit tambahan HTML dan plugin JavaScript dropdown .

Tab dengan dropdown

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

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

Kelancangan

Variabel

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

Perilaku JavaScript

Gunakan plugin tab JavaScript—termasuk satu per satu atau melalui file yang dikompilasi bootstrap.js—untuk memperluas tab dan pil navigasi kami untuk membuat panel konten lokal yang dapat ditabulasi.

Antarmuka tab dinamis, seperti yang dijelaskan dalam WAI ARIA Authoring Practices , memerlukan role="tablist", role="tab", role="tabpanel", dan aria-atribut tambahan untuk menyampaikan struktur, fungsionalitas, dan statusnya saat ini kepada pengguna teknologi bantu (seperti pembaca layar). Sebagai praktik terbaik, sebaiknya gunakan <button>elemen untuk tab, karena ini adalah kontrol yang memicu perubahan dinamis, bukan tautan yang menavigasi ke laman atau lokasi baru.

Perhatikan bahwa antarmuka tab dinamis tidak boleh berisi menu tarik-turun, karena ini menyebabkan masalah kegunaan dan aksesibilitas. Dari perspektif kegunaan, fakta bahwa elemen pemicu tab yang saat ini ditampilkan tidak langsung terlihat (karena berada di dalam menu tarik-turun yang tertutup) dapat menyebabkan kebingungan. Dari sudut pandang aksesibilitas, saat ini tidak ada cara yang masuk akal untuk memetakan konstruksi semacam ini ke pola WAI ARIA standar, yang berarti bahwa hal itu tidak dapat dengan mudah dipahami oleh pengguna teknologi bantu.

Ini adalah beberapa konten tempat penampung konten terkait tab Beranda. Mengklik tab lain akan mengalihkan visibilitas tab ini ke tab berikutnya. Tab JavaScript menukar kelas untuk mengontrol visibilitas dan gaya konten. Anda dapat menggunakannya dengan tab, pil, dan .navnavigasi bertenaga lainnya.

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 kebutuhan Anda, ini berfungsi dengan <ul>markup berbasis, seperti yang ditunjukkan di atas, atau dengan markup "roll your own" yang sewenang-wenang. Perhatikan bahwa jika Anda menggunakan <nav>, Anda tidak boleh menambahkannya role="tablist"secara langsung, karena ini akan menggantikan peran asli elemen sebagai tengara navigasi. Alih-alih, alihkan ke elemen alternatif (dalam contoh di bawah, sederhana <div>) dan bungkus di <nav>sekitarnya.

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

Plugin tab juga berfungsi dengan pil.

Ini adalah beberapa konten tempat penampung konten terkait tab Beranda. Mengklik tab lain akan mengalihkan visibilitas tab ini ke tab berikutnya. Tab JavaScript menukar kelas untuk mengontrol visibilitas dan gaya konten. Anda dapat menggunakannya dengan tab, pil, dan .navnavigasi bertenaga lainnya.

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

Ini adalah beberapa konten tempat penampung konten terkait tab Beranda. Mengklik tab lain akan mengalihkan visibilitas tab ini ke tab berikutnya. Tab JavaScript menukar kelas untuk mengontrol visibilitas dan gaya konten. Anda dapat menggunakannya dengan tab, pil, dan .navnavigasi bertenaga lainnya.

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 dapat mengaktifkan navigasi tab atau pil tanpa menulis JavaScript apa pun hanya dengan menentukan data-bs-toggle="tab"atau data-bs-toggle="pill"pada suatu 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

Aktifkan tab yang dapat ditabulasi melalui JavaScript (setiap tab harus diaktifkan satu per satu):

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

Anda dapat mengaktifkan tab individual dengan beberapa cara:

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

efek memudar

Untuk membuat tab memudar, tambahkan .fadeke masing-masing .tab-pane. Panel tab pertama juga harus .showmembuat konten awal terlihat.

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

Metode

Metode dan transisi asinkron

Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .

Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut .

constructor

Mengaktifkan elemen tab dan wadah konten. Tab harus memiliki a data-bs-targetatau, jika menggunakan tautan, hrefatribut, yang menargetkan simpul penampung di 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>

menunjukkan

Memilih tab yang diberikan dan menampilkan panel yang terkait. Tab lain yang sebelumnya dipilih menjadi tidak dipilih dan panel terkaitnya disembunyikan. Kembali ke pemanggil sebelum panel tab benar-benar ditampilkan (yaitu sebelum shown.bs.tabperistiwa terjadi).

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

  tab.show()

membuang

Menghancurkan tab elemen.

dapatkan Instance

Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM

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

getOrCreateInstance

Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi

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

Acara

Saat menampilkan tab baru, peristiwa diaktifkan dalam urutan berikut:

  1. hide.bs.tab(pada tab aktif saat ini)
  2. show.bs.tab(pada tab yang akan ditampilkan)
  3. hidden.bs.tab(pada tab aktif sebelumnya, sama dengan tab hide.bs.tabacara)
  4. shown.bs.tab(pada tab yang baru saja ditampilkan yang baru aktif, yang sama dengan untuk show.bs.tabacara tersebut)

Jika tidak ada tab yang sudah aktif, maka peristiwa hide.bs.taband hidden.bs.tabtidak akan diaktifkan.

Jenis acara Keterangan
show.bs.tab Acara ini diaktifkan pada tampilan tab, tetapi sebelum tab baru ditampilkan. Gunakan event.targetdan event.relatedTargetuntuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).
shown.bs.tab Acara ini diaktifkan pada tampilan tab setelah tab ditampilkan. Gunakan event.targetdan event.relatedTargetuntuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).
hide.bs.tab Acara ini diaktifkan ketika tab baru akan ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk menargetkan masing-masing tab aktif saat ini dan tab baru yang akan segera aktif.
hidden.bs.tab Acara ini diaktifkan setelah tab baru ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk menargetkan tab aktif sebelumnya dan tab aktif baru, 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
})