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

Dans ce tutoriel, nous allons créer un composant d'onglet à l'aide de CSS, sans JavaScript. Les onglets sont parfaits pour créer une interface utilisateur organisée en offrant un moyen d'afficher rapidement des morceaux de contenu sans avoir à faire défiler le navigateur.

Commençons par le code HTML nécessaire.

Le code HTML

<ul class="tabs">
  <li>
    <input id="tab1" type="radio" name="tabs" checked />
    <label for="tab1">Description</label>
    <div id="tab-panel1" class="tab-panel">
      <p>This is the content for the description panel.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore explicabo cum dolores hic possimus aut corrupti quisquam aperiam.</p>
    </div>
  </li>
  <li>
    <input id="tab2" type="radio" name="tabs" />
    <label for="tab2">Specifications</label>
    <div id="tab-panel2" class="tab-panel">
      <p>Specifications content can go here.</p>
      <p>Quia veniam inventore officiis nam error sunt libero, commodi architecto reiciendis qui fuga, itaque delectus quidem sequi.</p>
    </div>
  </li>  
  <li>
    <input id="tab3" type="radio" name="tabs" />
    <label for="tab3">Reviews</label>
    <div id="tab-panel3" class="tab-panel">
      <p>Here we can display some reviews from our customers.</p>
      <p>Impedit natus culpa nihil aperiam adipisci aliquam error, suscipit odio? Error sed esse perspiciatis quasi velit, ratione odit architecto? Explicabo pariatur.</p>
    </div>
  </li>     
</ul>

Vous pouvez remarqué que nous utilisons ici une entrée radio. Comme vous le verrez plus tard dans ce tutoriel, cela nous permet de détecter et de styliser l'onglet et le panneau actifs à l'aide du sélecteur :checked. Les entrées radio seront masquées par le CSS car lorsqu'une étiquette est cliquée, la radio correspondante est cochée, ce qui nous permet de styliser les étiquettes pour qu'elles ressemblent à des boutons.

Passons maintenant au CSS, en commençant par la disposition générale.

Les styles CSS

.tabs {
  list-style: none; 
  position: relative; 
  margin: 0;
  padding: 0;
  width: 100%;  
  font-family: sans-serif
}
.tabs li {
  display: inline-block;
}
.tabs input[type="radio"] {
  display: none;
}
.tabs label {
  display: block;
  cursor: pointer;
  padding: 10px 15px;
  border: 2px solid royalblue;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.tabs .tab-panel {  
  display: none;
  overflow: hidden;
  width: 100%;  
  position: absolute;
  left: 0;
  border-top: 2px solid royalblue;
}

Et pour finir, ajoutons le style CSS qui fera fonctionner les onglets.

.tabs [id^="tab"]:checked + label {   
  background-color: royalblue;
  color: #fff;
}
.tabs [id^="tab"]:checked ~ [id^="tab-panel"] {
  display: block;
}

Examinons de plus près certaines des propriétés CSS utilisées ici :

• .tabs [id^="tab"]:checked + label - sélectionne le libellé d'une entrée radio cochée dont l'identifiant est préfixé par tab.
• .tabs [id^="tab"]:checked ~ [id^="tab-panel"] - sélectionne tout élément dont l'id est préfixé par tab-panel et qui suit (~) tout élément coché dont l'id est préfixé par tab.

Nos onglets sont à présent prêts comme vous pouvez le voir à l'image ci-dessous.

C'est tout pour ce tutoriel. Vous devriez maintenant avoir un composant de contenu à onglets fonctionnel que vous pouvez facilement intégrer à votre prochain projet de site Web.