JS Tab (tab.js)
Tab digunakan untuk memisahkan konten ke dalam panel yang berbeda di mana masing-masing panel dapat dilihat satu per satu.
Untuk tutorial tentang Tabs, baca Bootstrap Tabs/Pills Tutorial .
Tab Plugin Kelas
| Kelas | Deskripsi | Contoh |
|---|---|---|
| .nav nav-tabs | Menciptakan tab navigasi | Cobalah |
| .nav-justified | Membuat navigasi tabs/pills lebar yang sama dari orang tua mereka, di layar lebar dari 768px. Pada layar yang lebih kecil, tab nav ditumpuk | Cobalah |
| .tab-content | Bersama dengan .tab-pane dan data-toggle="tab" , itu membuat toggable tab | Cobalah |
| .tab-pane | Bersama dengan .tab-content dan data-toggle="tab" , itu membuat toggable tab | Cobalah |
Via data-* Atribut
Tambahkan data-toggle="tab" untuk setiap tab, dan menambahkan .tab-pane kelas dengan ID yang unik untuk setiap tab dan membungkus mereka dalam .tab-content kelas.
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>
Cobalah sendiri " via JavaScript
Aktifkan 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')
Cobalah sendiri " tab Options
| None |
Metode tab
Tabel berikut berisi metode tab semua tersedia.
| metode | Deskripsi | Cobalah |
|---|---|---|
| .tab("show") | Menunjukkan tab | Cobalah |
tab Events
Tabel berikut berisi peristiwa tab semua tersedia.
| Peristiwa | Deskripsi | Cobalah |
|---|---|---|
| show.bs.tab | Terjadi ketika tab akan segera ditampilkan. | Cobalah |
| shown.bs.tab | Terjadi ketika tab sepenuhnya ditampilkan (setelah transisi CSS telah selesai) | Cobalah |
| hide.bs.tab | Terjadi ketika tab hendak disembunyikan | Cobalah |
| hidden.bs.tab | Terjadi ketika tab sepenuhnya tersembunyi (setelah transisi CSS telah selesai) | Cobalah |
Tip: Gunakan jQuery event.target dan event.relatedTarget 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
}); Cobalah sendiri "