Navs

Dokuméntasi sareng conto kumaha cara ngagunakeun komponén navigasi anu kalebet Bootstrap.

Dasar nav

Napigasi sadia dina Bootstrap babagi markup umum jeung gaya, ti .navkelas dasar ka nagara aktip tur ditumpurkeun. Swap kelas modifier pikeun pindah antara unggal gaya.

Komponén dasarna .navdiwangun ku flexbox sareng nyayogikeun pondasi anu kuat pikeun ngawangun sadaya jinis komponén navigasi. Ieu ngawengku sababaraha overrides gaya (pikeun gawé bareng béréndélan), sababaraha padding link pikeun wewengkon hit nu leuwih gede, sarta styling ditumpurkeun dasar.

Komponén dasar .navhenteu kalebet kaayaan naon waé .active. Conto di handap ieu kalebet kelas, utamina pikeun nunjukkeun yén kelas khusus ieu henteu micu gaya khusus.

<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 dianggo sapanjang, janten markup anjeun tiasa super fleksibel. Paké <ul>s kawas di luhur, <ol>lamun urutan item anjeun penting, atawa gulung sorangan kalawan <nav>unsur. Kusabab .navkagunaan display: flex, Tumbu nav kalakuanana sarua jeung item nav ngalakukeunana, tapi tanpa markup 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 sadia

Ngarobah gaya .navkomponén s kalawan modifiers na Utiliti. Campur jeung cocog sakumaha diperlukeun, atawa ngawangun sorangan.

alignment horizontal

Ngarobah alignment horizontal nav anjeun kalawan flexbox utiliti . Sacara standar, navs téh kénca-Blok, tapi anjeun bisa kalayan gampang ngarobahna kana puseur atawa katuhu Blok.

Dipuseurkeun ku .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>

Blok katuhu jeung .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>

Nangtung

Tumpukan navigasi anjeun ku cara ngarobah arah item fleksibel sareng .flex-columnutilitas. Kudu tumpukan aranjeunna dina sababaraha viewports tapi teu batur? Paké versi responsif (misalna, .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>

Sakumaha biasa, navigasi nangtung mungkin tanpa <ul>s, teuing.

<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

Nyokot nav dasar ti luhur tur nambahkeun .nav-tabskelas pikeun ngahasilkeun panganteur tabbed. Anggo aranjeunna pikeun nyiptakeun daérah tabable sareng plugin 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>

Pél

Candak HTML anu sami, tapi nganggo .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>

Eusian jeung menerkeun

Maksakeun .naveusi Anjeun pikeun manjangkeun lebar sadia pinuh salah sahiji dua kelas modifier. Pikeun saimbang ngeusian sakabeh spasi sadia kalawan .nav-items Anjeun, make .nav-fill. Perhatikeun yén sakabéh spasi horizontal nempatan, tapi teu unggal item nav boga lebar sarua.

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

Lamun ngagunakeun <nav>navigasi -based, anjeun aman bisa ngaleungitkeun .nav-itemsakumaha ngan .nav-linkdiperlukeun pikeun <a>elemen styling.

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

Pikeun elemen sarua-lebar, make .nav-justified. Kabéh spasi horizontal bakal dikawasaan ku Tumbu nav, tapi teu saperti di .nav-fillluhur, unggal item nav bakal lebar sarua.

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

Sarupa jeung .nav-fillconto ngagunakeun <nav>navigasi -based.

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

Gawe sareng Utiliti flex

Lamun perlu variasi nav responsif, mertimbangkeun ngagunakeun runtuyan flexbox Utiliti . Sanaos langkung verbose, utilitas ieu nawiskeun kustomisasi anu langkung ageung dina titik putus responsif. Dina conto di handap, nav kami bakal tumpuk dina breakpoint panghandapna, lajeng adaptasi jeung perenah horizontal nu ngeusi lebar sadia mimitian ti breakpoint leutik.

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

Ngeunaan diakses

Upami Anjeun keur make navs nyadiakeun bar navigasi, pastikeun pikeun nambahkeun a role="navigation"kana wadahna indungna paling logis tina <ul>, atawa mungkus <nav>unsur sabudeureun sakabéh navigasi. Entong nambihan peran ka <ul>dirina, sabab ieu bakal nyegah diumumkeun salaku daptar aktual ku téknologi anu ngabantosan.

Catet yén bar navigasi, sanajan sacara visual ditataan salaku tab jeung .nav-tabskelas, teu kudu dibikeun role="tablist", role="tab"atawa role="tabpanel"atribut. Ieu ngan cocog pikeun panganteur tab dinamis, sakumaha dijelaskeun dina pola tab Guide Praktek Ngarang ARIA . Tingali paripolah JavaScript pikeun panganteur tab dinamis dina bagian ieu pikeun conto.

Ngagunakeun dropdowns

Tambihkeun ménu lungsur sareng HTML tambahan sakedik sareng plugin JavaScript dropdowns .

Tab kalawan dropdowns

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

Pél kalawan dropdowns

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

kabiasaan JavaScript

Anggo plugin tab JavaScript-kalebetkeun éta nyalira atanapi ngalangkungan bootstrap.jsfile anu disusun-pikeun manjangkeun tab sareng pil navigasi urang pikeun nyiptakeun panel tabable tina eusi lokal.

Upami anjeun nuju ngawangun JavaScript kami tina sumber, peryogiutil.js .

Antarmuka tab dinamis, sakumaha anu dijelaskeun dina pola tab Panduan Praktek Pangarang ARIA , ngabutuhkeun role="tablist", role="tab", role="tabpanel", sareng aria-atribut tambahan pikeun nepikeun strukturna, fungsionalitas sareng kaayaan ayeuna ka pangguna téknologi anu ngabantosan (sapertos pamiarsa layar). Salaku prakték pangsaéna, kami nyarankeun ngagunakeun <button>elemen pikeun tab, sabab ieu mangrupikeun kadali anu nyababkeun parobahan dinamis, tinimbang tautan anu napigasi ka halaman atanapi lokasi énggal.

Catet yén plugin JavaScript tab henteu ngadukung antarmuka tab anu ngandung ménu turun, sabab ieu nyababkeun masalah usability sareng aksésibilitas. Tina sudut pandang usability, kanyataan yén unsur pemicu tab anu ayeuna ditampilkeun henteu langsung katingali (sabab aya di jero menu dropdown anu ditutup) tiasa nyababkeun kabingungan. Tina sudut pandang aksésibilitas, ayeuna teu aya cara anu wijaksana pikeun memetakan konstruksi sapertos kieu kana pola WAI ARIA standar, hartosna éta henteu tiasa gampang kaharti ku pangguna téknologi anu ngabantosan.

Eusi placeholder pikeun panel tab. Ieu aya hubunganana sareng tab bumi. Nyandak anjeun mil tinggi, luhur pisan, 'sabab anjeunna ngagaduhan seuri internasional. Aya urang asing dina ranjang abdi, aya pounding dina sirah kuring. Oh, henteu. Dina kahirupan anu sanés kuring bakal ngajantenkeun anjeun cicing. Kusabab kuring, kuring sanggup naon waé. Cocog pikeun perang mahkota kuring. Dipaké maok arak kolot jeung naék kana tajug. Nada, tan pas sareng siap, hurungkeun sabab janten beurat. Cintana ibarat ubar. Kuring nebak yén kuring poho kuring kungsi pilihan.

Eusi placeholder pikeun panel tab. Ieu aya hubunganana sareng tab profil. Anjeun ngagaduhan arsitéktur anu pangsaéna. Perangko paspor, anjeunna kosmopolitan. Rupa, seger, galak, kami ngagaduhan konci. Teu pernah ngarencanakeun yén hiji poé kuring bakal kaleungitan anjeun. Manehna eats haté anjeun kaluar. Ciuman anjeun kosmik, unggal gerakan mangrupikeun sihir. Maksud kuring nu leuwih, maksud kuring kawas manéhna nu hiji. Salam sayang hayu urang jalan-jalan. Ngan sorangan peuting kawas 4 Juli! Tapi anjeun langkung resep dibuang.

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>

Pikeun mantuan nyocogkeun ka kabutuhan Anjeun, ieu jalan kalawan <ul>-based markup, sakumaha ditémbongkeun di luhur, atawa kalayan sagala wenang "gulungkeun sorangan" markup. Catet yén upami anjeun nganggo <nav>, anjeun henteu kedah nambihan role="tablist"langsung kana éta, sabab ieu bakal ngaleungitkeun peran asli unsur éta salaku landmark navigasi. Gantina, pindah ka unsur alternatif (dina conto di handap, a basajan <div>) jeung bungkus <nav>sabudeureun eta.

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>

Plugin tab ogé tiasa dianggo sareng 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>

Sareng sareng pil nangtung.

Eusi placeholder pikeun panel tab. Ieu aya hubunganana sareng tab bumi. Ningali anjeun tengah kota nyanyi Blues. Lalajo anjeun ngurilingan solokan. Naha anjeun henteu ngantep kuring mampir? Beurat sirah anu ngagem makuta. Leres, urang ngadamel malaikat ceurik, hujan turun ka bumi ti luhur. Hoyong ningali acara dina 3D, pilem. Dupi anjeun kantos ngarasa, ngarasa jadi kertas ipis. Ieu enya atawa henteu, henteu meureun.

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>

Ngagunakeun atribut data

Anjeun tiasa ngaktipkeun navigasi tab atanapi pil tanpa nyerat JavaScript ku ngan saukur nangtukeun data-toggle="tab"atanapi data-toggle="pill"dina unsur. Paké atribut data ieu dina .nav-tabsatawa .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>

Ngaliwatan JavaScript

Aktipkeun tab tabable via JavaScript (unggal tab kudu diaktipkeun individual):

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

Anjeun tiasa ngaktipkeun tab individu ku sababaraha 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

Pangaruh luntur

Pikeun nyieun tab luntur, tambahkeun .fadeka unggal .tab-pane. Panel tab munggaran ogé kedah .showngajantenkeun eusi awal katingali.

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

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

$().tab

Aktipkeun unsur tab sareng wadah eusi. Tab kedah gaduh boh data-targetatanapi, upami nganggo tautan, hrefatribut nargétkeun titik wadahna dina 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')

Milih tab anu dipasihkeun sareng nunjukkeun jandela anu aya hubunganana. Tab sanésna anu saacanna dipilih janten teu dipilih sareng jandela anu aya hubunganana disumputkeun. Mulih ka panelepon saméméh panel tab sabenerna geus ditémbongkeun (ie saméméh shown.bs.tabacara lumangsung).

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

.tab( 'buang')

Ngancurkeun tab unsur.

Kajadian

Nalika ningalikeun tab anyar, kajadian-kajadian hurung dina urutan ieu:

hide.bs.tab(dina tab aktip ayeuna)
show.bs.tab(dina tab anu bakal dipidangkeun)
hidden.bs.tab(dina tab aktip saméméhna, sarua jeung pikeun hide.bs.tabacara)
shown.bs.tab(dina tab anu nembé ditingalikeun, sami sareng show.bs.tabacara)

Upami teu aya tab anu parantos aktip, maka acara hide.bs.tabsareng hidden.bs.tabmoal dipecat.

Jenis Acara	Katerangan
show.bs.tab	Kajadian ieu hurung dina acara tab, tapi sateuacan tab anyar ditingalikeun. Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
ditémbongkeun.bs.tab	Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
hide.bs.tab	Kajadian ieu hurung nalika tab anyar bakal ditingalikeun (sahingga tab aktip saméméhna bakal disumputkeun). Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip anu ayeuna sareng tab anu énggal-énggal aktip, masing-masing.
disumputkeun.bs.tab	Kajadian ieu hurung saatos tab énggal ditampilkeun (sahingga tab aktip sateuacana disumputkeun). Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip sateuacana sareng tab aktip énggal, masing-masing.

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