Bootstrap JS Tab
Kelas Tab CSS
Tab digunakan untuk memisahkan konten ke dalam panel yang berbeda di mana setiap panel dapat dilihat satu per satu.
Untuk tutorial tentang Tab, baca Tutorial Bootstrap Tab/Pills kami .
Class | Description | Example |
---|---|---|
.nav nav-tabs |
Creates navigation tabs | |
.nav nav-pills |
Creates navigation pills | |
.nav-item |
Creates tab items | |
.nav-link |
Styles links inside the navigation tab | |
.nav-justified |
Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked | |
.tab-content |
Together with .tab-pane and data-toggle="tab", it makes the tab toggleable | |
.tab-pane |
Together with .tab-content and data-toggle="tab", it makes the tab toggleable |
Melalui data-* Atribut
Tambahkan data-toggle="tab"
ke setiap tab, dan tambahkan .tab-pane
kelas dengan ID unik untuk setiap tab dan bungkus dalam .tab-content
kelas.
Contoh
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active container"
id="home">...</div>
<div class="tab-pane container"
id="menu1">...</div>
<div class="tab-pane container"
id="menu2">...</div>
</div>
Melalui JavaScript
Aktifkan secara manual dengan:
Contoh
// Select all tabs
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select
last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab
(zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
Opsi Tab
None |
Metode Tab
Tabel berikut mencantumkan semua metode tab yang tersedia.
Method | Description | Try it |
---|---|---|
.tab("show") | Shows the tab |
Acara Tab
Tabel berikut mencantumkan semua peristiwa tab yang tersedia.
Event | Description | Try it |
---|---|---|
show.bs.tab | Occurs when the tab is about to be shown. | |
shown.bs.tab | Occurs when the tab is fully shown (after CSS transitions have completed) | |
hide.bs.tab | Occurs when the tab is about to be hidden | |
hidden.bs.tab | Occurs when the tab is fully hidden (after CSS transitions have completed) |
Tip: Gunakan event.target dan event.relatedTarget jQuery untuk mendapatkan tab aktif dan tab aktif sebelumnya:
Contoh
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});