JS Tab (tab.js)
Les onglets sont utilisés pour séparer le contenu en différents volets où chaque volet est visible une à la fois.
Pour un tutoriel sur les onglets, lisez nos Bootstrap Tabs/Pills Tutorial .
Les classes Tab Plugin
| Classe | La description | Exemple |
|---|---|---|
| .nav nav-tabs | Crée des onglets de navigation | Essayez - le |
| .nav-justified | Donne navigation tabs/pills largeurs égales de leurs parents, à des écrans plus large que 768px. Sur les petits écrans, les onglets nav sont empilés | Essayez - le |
| .tab-content | Avec .tab-pane et des data-toggle="tab" , il fait l'onglet toggable | Essayez - le |
| .tab-pane | Avec .tab-content et des data-toggle="tab" , il fait l'onglet toggable | Essayez - le |
Via data-* Attributs
Ajouter des data-toggle="tab" pour chaque onglet, et ajouter un .tab-pane classe avec un identifiant unique pour chaque onglet et les envelopper dans un .tab-content classe.
Exemple
<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>
Essayez - le vous - même » Via JavaScript
Activer manuellement:
Exemple
// 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')
Essayez - le vous - même » Options Tab
| None |
Méthodes Tab
Le tableau suivant répertorie les méthodes de tabulation tous disponibles.
Onglet Evénements
Le tableau suivant répertorie les événements de l'onglet tous disponibles.
| un événement | La description | Essayez-le |
|---|---|---|
| show.bs.tab | Survient lorsque l'onglet est sur le point d'être montré. | Essayez - le |
| shown.bs.tab | Survient lorsque l'onglet est entièrement affiché (après les transitions CSS ont terminé) | Essayez - le |
| hide.bs.tab | Survient lorsque l'onglet est sur le point d'être caché | Essayez - le |
| hidden.bs.tab | Survient lorsque l'onglet est entièrement caché (après les transitions CSS ont terminé) | Essayez - le |
Astuce: Utilisez jQuery event.target et event.relatedTarget pour obtenir l'onglet actif et l'onglet actif précédente: