Bootstrap JS Tab
JS Tab (tab.js)
Oortjies word gebruik om inhoud in verskillende vensters te skei waar elke venster een op 'n slag sigbaar is.
Vir 'n tutoriaal oor Tabs, lees ons Bootstrap Tabs/Pills Tutoriaal .
Die Tab-inprop-klasse
| 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 |
Via data-* Kenmerke
Voeg data-toggle="tab"by elke oortjie, en voeg 'n .tab-paneklas by met 'n unieke ID vir elke oortjie en draai dit in 'n .tab-contentklas toe.
Voorbeeld
<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>
Via JavaScript
Aktiveer handmatig met:
Voorbeeld
// 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')
Oortjie-opsies
| None |
Tab Metodes
Die volgende tabel lys alle beskikbare oortjiemetodes.
| Method | Description | Try it |
|---|---|---|
| .tab("show") | Shows the tab |
Tab Gebeurtenisse
Die volgende tabel lys alle beskikbare oortjiegebeurtenisse.
| 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) |
Wenk: Gebruik jQuery se event.target en event.relatedTarget om die aktiewe oortjie en die vorige aktiewe oortjie te kry:
Voorbeeld
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});