On a vu ce que nous propose Bootstrap pour la navigation. Dans ce chapitre nous allons utiliser les classes de bases déjà vues en ajoutant de l'interactivité pour créer des onglets.

Le principe

Ce plugin nécessite 2 groupes éléments :

• des onglets avec chacun l'attribut data-toggle="tab" ou data-toggle="pill", selon l'aspect désiré, on ajoute la classe active à l'onglet actif au chargement,
• un groupe de panneaux avec la classe tab-content.

Pour chacun des panneaux on utilise la classe tab-pane, en prévoyant la classe active pour le panneau qui doit apparaître au chargement. Il faut établir un lien entre chaque onglet et le panneau qui lui correspond. Cela se fait en attribuant à chaque panneau un identifiant référencé par un attribut href au niveau de l'onglet. Ce qu'on peut schématiser ainsi :

Aspect "tabs"

Donc dans sa version la plus épurée on a ce code avec 2 onglets et un aspect "tabs" :

<nav class="nav nav-tabs">
  <a class="nav-item nav-link active" href="#p1" data-toggle="tab">Onglet 1</a>
  <a class="nav-item nav-link" href="#p2" data-toggle="tab">Onglet 2</a>
</nav>

<div class="tab-content">
  <div class="tab-pane active" id="p1">Panneau 1</div>
  <div class="tab-pane" id="p2">Panneau 2</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.0/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Le plugin fonctionne aussi avec des balises ul et li à la place de nav.

Aspect "pills"

Voici le code avec aspect "pills" :

<nav class="nav nav-pills">
  <a class="nav-item nav-link active" href="#p1" data-toggle="tab">Onglet 1</a>
  <a class="nav-item nav-link" href="#p2" data-toggle="tab">Onglet 2</a>
</nav>

<div class="tab-content">
  <div class="tab-pane active" id="p1">Panneau 1</div>
  <div class="tab-pane" id="p2">Panneau 2</div>
</div>

Quelques effets

Transition progressive

Pour obtenir un effet progressif, il suffit d'ajouter la classe fade pour chacun des panneaux. D'autre part il faut prévoir la classe show pour le panneau qui doit s'afficher au chargement de manière à faire apparaître le panneau et avoir une animation à ce moment là également :

<nav class="nav nav-tabs">
  <a class="nav-item nav-link active" href="#p1" data-toggle="tab">Onglet 1</a>
  <a class="nav-item nav-link" href="#p2" data-toggle="tab">Onglet 2</a>
</nav>

<div class="tab-content">
  <div class="tab-pane fade show active" id="p1">Panneau 1</div>
  <div class="tab-pane fade" id="p2">Panneau 2</div>
</div>

Tester en ligne

Empilage

Si la disposition en ligne ne vous convient pas vous pouvez empiler les onglets en utilisant flexbox avec la classe flex-column :

<nav class="nav nav-pills flex-column">
  <a class="nav-item nav-link active" href="#paccueil" data-toggle="tab">Accueil</a>
  <a class="nav-item nav-link" href="#livres" data-toggle="tab">Livres</a>
  <a class="nav-item nav-link" href="#temoignages" data-toggle="tab">Témoignages</a>
</nav>

<div class="tab-content">
    <div class="tab-pane active" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="livres">Tous les livres</div>
    <div class="tab-pane" id="temoignages">Tous les témoignages</div>
</div>

Tester en ligne

Désactiver un onglet

Vous pouvez marquer un onglet comme inactif avec la classe disabled :

<nav class="nav nav-pills flex-column">
  <a class="nav-item nav-link active" href="#accueil" data-toggle="tab">Accueil</a>
  <a class="nav-item nav-link" href="#livres" data-toggle="tab">Livres</a>
  <a class="nav-item nav-link" href="#temoignages" data-toggle="tab">Témoignages</a>
</nav>

<div class="tab-content">
    <div class="tab-pane active" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="livres">Tous les livres</div>
    <div class="tab-pane" id="temoignages">Tous les témoignages</div>
</div>

Menu déroulant

Pour avoir un menu déroulant dans un onglet, il faut utiliser le plugin dropdown que nous avons déjà vu :

<nav class="nav nav-tabs">
  <a class="nav-item nav-link active" href="#accueil" data-toggle="tab">Accueil</a>
  <div class="dropdown">
    <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#">Livres</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#policiers" data-toggle="tab">Policiers</a>
      <a class="dropdown-item" href="#romans" data-toggle="tab">Romans</a>
      <a class="dropdown-item" href="#contes" data-toggle="tab">Contes</a>
    </div>
  </div>
  <a class="nav-item nav-link" href="#temoignages" data-toggle="tab">Témoignages</a>
</nav>

<div class="tab-content">
  <div class="tab-pane active" id="accueil">Texte d'accueil</div>
  <div class="tab-pane" id="temoignages">Tous les témoignages</div>
  <div class="tab-pane" id="policiers">Tous les livres policiers</div>
  <div class="tab-pane" id="romans">Tous les romans</div>
  <div class="tab-pane" id="contes">Tous les contes</div>
</div>

Tester en ligne

Pour que le menu déroulant soit actif il faut prévoir la librairie popper.js (ou utiliser la version bundle de Bootstrap).

On peut évidemment prévoir un menu déroulant avec l'aspect "pills" :

<nav class="nav nav-pills">
  <a class="nav-item nav-link active" href="#accueil" data-toggle="tab">Accueil</a>
  <div class="dropdown">
    <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#">Livres</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#policiers" data-toggle="tab">Policiers</a>
      <a class="dropdown-item" href="#romans" data-toggle="tab">Romans</a>
      <a class="dropdown-item" href="#contes" data-toggle="tab">Contes</a>
    </div>
  </div>
  <a class="nav-item nav-link" href="#temoignages" data-toggle="tab">Témoignages</a>
</nav>

<div class="tab-content">
  <div class="tab-pane active" id="accueil">Texte d'accueil</div>
  <div class="tab-pane" id="temoignages">Tous les témoignages</div>
  <div class="tab-pane" id="policiers">Tous les livres policiers</div>
  <div class="tab-pane" id="romans">Tous les romans</div>
  <div class="tab-pane" id="contes">Tous les contes</div>
</div>

Tester en ligne

Accessibilité

Un groupement d'étiquettes équipées d'un mécanisme pour afficher des panneaux doit comporter les rôles tablist et tab. Il faut le compléter en repérant les panneaux avec le rôle tabpanel. D'autre part il faut compléter avec des attributs aria-*. Voici un exemple de mise en œuvre :

<nav class="nav nav-pills" role="tablist">
  <a class="nav-item nav-link active" id="accueil-tab" href="#accueil" data-toggle="tab" role="tab" aria-controls="accueil" aria-expanded="true">Accueil</a>
  <a class="nav-item nav-link" id="livres-tab" href="#livres" data-toggle="tab" role="tab" aria-controls="livres">Livres</a>
  <a class="nav-item nav-link" id="temoignages-tab" href="#temoignages" data-toggle="tab" role="tab" aria-controls="temoignages">Témoignages</a>
</nav>

<div class="tab-content">
    <div class="tab-pane active" id="accueil" role="tabpanel" aria-labelledby="accueil-tab">Texte d'accueil</div>
    <div class="tab-pane" id="livres" aria-labelledby="livres-tab">Tous les livres</div>
    <div class="tab-pane" id="temoignages" aria-labelledby="temoignages-tab">Tous les témoignages</div>
</div>

Activation avec Javascript

Un exemple

Nous avons ci-dessus activé le plugin avec la propriété data-toggle="tab". Il est aussi possible d'utiliser le plugin directement avec du Javascript. Voici un exemple sans la propriété renseignée :

<nav class="nav nav-tabs">
  <a class="nav-item nav-link active" href="#accueil">Accueil</a>
  <a class="nav-item nav-link" href="#livres">Livres</a>
  <a class="nav-item nav-link" href="#temoignages">Témoignages</a>
</nav>

<div class="tab-content">
    <div class="tab-pane active" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="livres">Tous les livres</div>
    <div class="tab-pane" id="temoignages">Tous les témoignages</div>
</div>

Les onglets sont devenus inactifs. Pour que ça fonctionne il faut ajouter un peu de Javascript :

$('a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Tous les onglets doivent être activés, c'est pour cette raison que j'ai choisi pour ma page le sélecteura qui est sans ambiguïté.

Les événements

Vous disposez également de 4 événements pour ce plugin :

• show.bs.tab : se déclenche dès l'appel à la méthode show avant que le panneau n'apparaisse
• shown.bs.tab : se déclenche lorsque le panneau devient visible
• hide.bs.tab :  se déclenche lorsqu'un panneau va devenir invisible
• hidden.bs.tab : se déclenche lorsqu'un panneau est devenu invisible

D'autre part il est possible de connaître l'onglet actif avec event.target et l'onglet précédemment sélectionné avec event.relatedTarget. On va utiliser tout cela pour afficher le nom de l'onglet actuel et du précédent à chaque changement. On va donc ajouter le code HTML pour accueillir l'information :

<nav class="nav nav-tabs">
  <a class="nav-item nav-link active" href="#accueil">Accueil</a>
  <a class="nav-item nav-link" href="#livres">Livres</a>
  <a class="nav-item nav-link" href="#temoignages">Témoignages</a>
</nav>

<div class="tab-content">
    <div class="tab-pane active" id="accueil">Texte d'accueil</div>
    <div class="tab-pane" id="livres">Tous les livres</div>
    <div class="tab-pane" id="temoignages">Tous les témoignages</div>
</div>

<hr>
<p><strong>Onglet actif </strong>: <span id='actif'></span></p>
<p><strong>Onglet précédent </strong>: <span id='precedent'></span></p>

Il ne reste plus qu'à prévoir le code Javascript pour déclencher le plugin et mettre en place l'écoute de l'événement et agir en conséquence :

$('a')
.click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
.on('shown.bs.tab', function (e) {
  $('#actif').text($(e.target).text())
  $('#precedent').text($(e.relatedTarget).text())
})

Tester en ligne

En résumé

• Les onglets permettent sur un même espace d'afficher au choix plusieurs contenus avec un simple clic.
• Les onglets sont faciles à organiser : horizontaux, empilés, simples liens ou boutons.
• On peut aussi intégrer un menu déroulant dans un onglet.