Navs

Dokumentasi dan contoh cara menggunakan komponen navigasi yang disertakan Bootstrap.

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.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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 corak tab Panduan Amalan Pengarangan ARIA . Lihat tingkah laku JavaScript untuk antara muka tab dinamik dalam bahagian ini sebagai contoh.

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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

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.

Jika anda sedang membina JavaScript kami daripada sumber, ia memerlukanutil.js .

Antara muka tab dinamik, seperti yang diterangkan dalam corak tab Panduan Amalan Pengarangan 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 pemalam JavaScript tab tidak menyokong antara muka tab yang 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.

Kandungan pemegang tempat untuk panel tab. Yang ini berkaitan dengan tab rumah. Membawa anda berbatu-batu tinggi, begitu tinggi, kerana dia mempunyai satu senyuman antarabangsa itu. Ada orang asing di atas katil saya, ada rasa berdebar-debar di kepala saya. Oh tidak. Dalam kehidupan lain saya akan membuat anda tinggal. Kerana saya, saya mampu melakukan apa sahaja. Sesuai untuk pertarungan mahkota saya. Digunakan untuk mencuri minuman keras ibu bapa anda dan naik ke bumbung. Nada, sawo matang dan sedia, pasangkannya kerana ia menjadi berat. Cintanya seperti dadah. Saya rasa saya terlupa saya mempunyai pilihan.

Kandungan pemegang tempat untuk panel tab. Yang ini berkaitan dengan tab profil. Anda mendapat seni bina terbaik. Setem pasport, dia kosmopolitan. Baik, segar, garang, kami mendapatnya di kunci. Tidak pernah merancang bahawa suatu hari nanti saya akan kehilangan awak. Dia makan hati awak. Ciuman anda adalah kosmik, setiap pergerakan adalah sihir. Maksud saya yang, maksud saya seperti dia. Salam insan tersayang mari kita melancong. Miliki sahaja malam seperti 4 Julai! Tetapi anda lebih suka membazir.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 seharusnya menambahnya role="tablist"secara langsung, kerana ini akan mengatasi peranan asli elemen sebagai tanda tempat navigasi. Sebaliknya, tukar kepada elemen alternatif (dalam contoh di bawah, mudah <div>) dan bungkus di <nav>sekelilingnya.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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.

<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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.

Kandungan pemegang tempat untuk panel tab. Yang ini berkaitan dengan tab rumah. Melihat anda di pusat bandar menyanyikan lagu Blues. Perhatikan anda mengelilingi longkang. Kenapa tak izinkan saya singgah? Berat adalah kepala yang memakai mahkota. Ya, kami membuat malaikat menangis, menghujani bumi dari atas. Mahu melihat rancangan dalam 3D, sebuah filem. Adakah anda pernah rasa, rasa begitu nipis kertas. Ia adalah ya atau tidak, tidak mungkin.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

Menggunakan atribut data

Anda boleh mengaktifkan navigasi tab atau pil tanpa menulis sebarang JavaScript dengan hanya menyatakan data-toggle="tab"atau data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Anda boleh mengaktifkan tab individu dalam beberapa cara:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 .

$().tab

Mengaktifkan elemen tab dan bekas kandungan. Tab harus mempunyai sama ada data-targetatau, jika menggunakan pautan, hrefatribut yang 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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('show')

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

$('#someTab').tab('show')

.tab('buang')

Memusnahkan tab elemen.

Peristiwa

Apabila menunjukkan tab baharu, peristiwa berlaku dalam susunan berikut:

hide.bs.tab(pada tab aktif semasa)
show.bs.tab(pada tab yang akan ditunjukkan)
hidden.bs.tab(pada tab aktif sebelumnya, sama seperti untuk hide.bs.tabacara)
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.target`dan `event.relatedTarget`untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
ditunjukkan.bs.tab	Peristiwa ini berlaku pada rancangan tab selepas tab ditunjukkan. Gunakan `event.target`dan `event.relatedTarget`untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
hide.bs.tab	Peristiwa ini berlaku apabila tab baharu hendak ditunjukkan (dan oleh itu tab aktif sebelumnya akan disembunyikan). Gunakan `event.target`dan `event.relatedTarget`untuk 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.target`dan `event.relatedTarget`untuk menyasarkan tab aktif sebelumnya dan tab aktif baharu, masing-masing.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})