Bootstrap JS Tab
Tab JS (tab.js)
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 .
Kelas Plugin Tab
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | |
| .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-panekelas dengan ID unik untuk setiap tab dan bungkus dalam .tab-contentkelas.
Contoh
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in
active">
<h3>HOME</h3>
<p>Some
content.</p>
</div>
<div id="menu1" class="tab-pane
fade">
<h3>Menu 1</h3>
<p>Some
content in menu 1.</p>
</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
});