Tab Header - Comment créer des en-têtes d'onglets avec CSS et JavaScript ?

Dans ce tutoriel, vous allez apprendre à créer des en-têtes d'onglets avec CSS et JavaScript.

Nous allons commencer par définir la structure de nos en-têtes d'onglets avec du HTML.

Le code HTML

<p>Click on the buttons inside the tabbed menu:</p>

<div id="London" class="tabcontent">
  <h1>London</h1>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h1>Paris</h1>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h1>Tokyo</h1>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="Oslo" class="tabcontent">
  <h1>Oslo</h1>
  <p>Oslo is the capital of Norway.</p>
</div>

<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'royalblue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>

Dans le code HTML ci-dessus, nous créons quatre boutons qui nous permettrons d'accéder au contenu d'un onglet spécifique lorsqu'on clique dessus. Nous créons également quatre éléments <div> qui correspondent chacun au contenu d'un onglet. Tous ces éléments <div> qui sont masqués par défaut (avec du CSS et du JavaScript) ont chacun une classe "tabcontent". Lorsque l'utilisateur clique sur un bouton - le contenu de l'onglet qui correspond à ce bouton s'affiche en en-tête.

À pésent, passons au CSS.

Les styles CSS

body {font-family: "Lato", sans-serif;}

.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content */
.tabcontent {
  color: white;
  display: none;
  padding: 50px;
  text-align: center;
}

#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:royalblue;}
#Oslo {background-color:orange;}

Dans le CSS ci-dessus, nous commençons par définir la couleur de fond de nos boutons (qui ici représentent la barre de navigation) au gris - color: #555; - et la couleur de texte au blanc - color: white;. Nous faisons également flotter les boutons à gauche - float: left; - avec une largeur de 25% cahcun - width: 25%;.

Ensuite, nous utilisons la classe "tabcontent" pour masquer le contenu de chaque onglet - display: none; - et qui lorsqu'il sera visible, s'affichera centré - text-align: center; - avec une couleur de texte blanc - color: white;.

Et pour finir, nous définissons la couleur de chaque contenu de l'onglet en utilisant l'id associé à chaque élément <div> du code HTML.

Passons maintenant au au JavaScript.

Le script JavaScript

function openCity(cityName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName).style.display = "block";
  elmnt.style.backgroundColor = color;

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

Dans le script ci-dessus, nous définissons la fonction openCity(cityName,elmnt,color) qui permet d'accéder au contenu spécifique à chaque onglet lorsqu'on clique sur le bouton correspondant. Cette fonction permet par la même occasion de masquer le contenu de tous les autres onglets.

Et pour finir, nous affichons par défaut le contenu correspondant à l'onglet du premier bouton en cliquant dessus.

Notre en-têtes d'onglets est maintenant prêt comme vous pouvez le voir à l'image ci-dessous.

Et c'est tout pour ce tutoriel. À présent, vous savez comment créer un menu à onglets vertical avec CSS et JavaScript.

Ces articles sur les onglets pourraient également vous interrésser :

Tabs - Comment créer des onglets avec du CSS (sans JavaScript) ?

Tabs - Comment créer des onglets avec du HTML, CSS et JavaScript ?

Vertical Tabs - Comment créer un menu à onglets vertical avec CSS et JavaScript ?