Onglets

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 21 sur 35.

Les onglets sont un moyen d'organiser le contenu en sections distinctes tout en gardant tout sur une seule page. Au lieu de faire défiler une longue page, les utilisateurs peuvent passer d'un panneau de contenu à l'autre en cliquant sur un onglet. On voit souvent des onglets dans les pages de paramètres, les tableaux de bord ou les descriptions de produits (par exemple, Détails, Avis, FAQ).

Nous pouvons créer des onglets sans JavaScript en utilisant :

Des boutons radio (pour qu'un seul onglet puisse être actif à la fois)
Des étiquettes (labels) qui agissent comme des boutons d'onglet cliquables
Des sélecteurs CSS (:checked) pour afficher le bon contenu

HTML :

<div class="tabs">
   <input type="radio" id="tab1" name="tab" checked>
   <label for="tab1">Tab 1</label>
   <div id="content1" class="tab-content">This is the content of Tab 1.</div>
   
   <input type="radio" id="tab2" name="tab">
   <label for="tab2">Tab 2</label>
   <div id="content2" class="tab-content">This is the content of Tab 2.</div>
   
   <input type="radio" id="tab3" name="tab">
   <label for="tab3">Tab 3</label>
   <div id="content3" class="tab-content">This is the content of Tab 3.</div>
 </div>

CSS :

<style>
  /* Masquer les boutons radio */
  input { display: none; }

  /* Étiquettes des onglets */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* Contenu masqué par défaut */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* Afficher le contenu lorsque le bouton radio est coché */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* Mettre en évidence l'onglet actif */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

Voici un petit rappel que vous pourriez donner aux étudiants :

+ (frère adjacent) → sélectionne l'élément immédiatement suivant.
~ (frère général) → sélectionne n'importe quel frère suivant (pas seulement le suivant).

Défi

Facile

On vous donne un code HTML de départ avec deux onglets déjà configurés. Votre tâche consiste à étendre et à améliorer le système d'onglets.

Ajoutez un autre onglet pour “Sleep” :
- Libellé : Sleep
- Contenu : “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
Ajoutez #tab3:checked ~ #content3 au sélecteur CSS qui affiche le contenu de l'onglet lorsqu'il est coché.

Aide-mémoire

Créez des onglets sans JavaScript en utilisant des boutons radio, des étiquettes et des sélecteurs CSS :

Structure HTML :

<div class="tabs">
   <input type="radio" id="tab1" name="tab" checked>
   <label for="tab1">Tab 1</label>
   <div id="content1" class="tab-content">Content for Tab 1</div>
   
   <input type="radio" id="tab2" name="tab">
   <label for="tab2">Tab 2</label>
   <div id="content2" class="tab-content">Content for Tab 2</div>
</div>

CSS pour la fonctionnalité d'onglets :

/* Masquer les boutons radio */
input { display: none; }

/* Styliser les étiquettes d'onglets */
label {
  padding: 5px 10px;
  background: lightgray;
  cursor: pointer;
}

/* Masquer le contenu par défaut */
.tab-content { 
  display: none; 
  padding: 10px; 
  border: 1px solid #ccc; 
}

/* Afficher le contenu lorsque le bouton radio est coché */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

/* Mettre en évidence l'onglet actif */
#tab1:checked + label,
#tab2:checked + label {
  background: steelblue;
  color: white;
}

Sélecteurs de frères CSS :

+ (frère adjacent) → sélectionne l'élément immédiatement suivant
~ (frère général) → sélectionne n'importe quel élément frère suivant

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Tabs</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }

    .tabs {
      display: flex;
      flex-direction: column;
      width: 350px;
    }

    /* Hide the radio inputs */
    .tabs input {
      display: none;
    }

    /* Tab labels */
    .tabs label {
      padding: 10px;
      background: #eee;
      cursor: pointer;
      border: 1px solid #ccc;
    }

    .tabs label:hover {
      background: #ddd;
    }

    /* Tab content */
    .tab-content {
      display: none;
      border: 1px solid #ccc;
      padding: 10px;
      background: #fff;
      line-height: 1.5;
    }

    /* Show content when radio is checked */
    #tab1:checked ~ #content1,
    #tab2:checked ~ #content2 {
      display: block;
    }

    /* Highlight active tab */
    #tab1:checked + label,
    #tab2:checked + label,
    #tab3:checked + label {
      background: #4cafef;
      color: white;
    }
  </style>
</head>
<body>
  <div class="tabs">
    <input type="radio" id="tab1" name="tab" checked>
    <label for="tab1">Nutrition</label>
    <div id="content1" class="tab-content">
      <h3>Nutrition</h3>
      <p>A balanced diet fuels your body and mind. Focus on fruits, vegetables, whole grains, and lean proteins. Avoid too much processed food.</p>
    </div>

    <input type="radio" id="tab2" name="tab">
    <label for="tab2">Exercise</label>
    <div id="content2" class="tab-content">
      <h3>Exercise</h3>
      <p>Daily movement strengthens your body and reduces health risks. Even a 30-minute walk or stretching makes a difference.</p>
    </div>

  </div>
</body>
</html>