Onglet Bootstrap JS
Onglet JS (tab.js)
Les onglets sont utilisés pour séparer le contenu dans différents volets où chaque volet est visible un par un.
Pour un tutoriel sur les onglets, lisez notre tutoriel Bootstrap Tabs/Pills .
Les classes de plugin d'onglet
| 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-* Attributs
Ajoutez data-toggle="tab"à chaque onglet et ajoutez une .tab-paneclasse avec un ID unique pour chaque onglet et encapsulez-les dans une .tab-contentclasse.
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>
Via Javascript
Activer manuellement avec :
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')
Options d'onglet
| None |
Méthodes d'onglet
Le tableau suivant répertorie toutes les méthodes de tabulation disponibles.
| Method | Description | Try it |
|---|---|---|
| .tab("show") | Shows the tab |
Événements d'onglet
Le tableau suivant répertorie tous les événements d'onglet disponibles.
| 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) |
Astuce : Utilisez event.target et event.relatedTarget de jQuery pour obtenir l'onglet actif et l'onglet actif précédent :
Exemple
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text(); // active tab
var y = $(event.relatedTarget).text(); // previous tab
});