Onglets

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 1 sur 27.

Les onglets permettent aux utilisateurs de basculer entre différents éléments de contenu sans quitter la page. Dans la section 4, nous les avons créés avec HTML et CSS. Maintenant, nous allons utiliser JavaScript.

Points clés :

Nous utilisons la propriété display (none / block) pour masquer et afficher des éléments.
Lorsque l'utilisateur clique sur un onglet, nous appelons la fonction et passons l'ID de l'onglet.

À l'intérieur de la fonction, nous utilisons <strong>querySelectorAll</strong> + <strong>forEach</strong> pour masquer tous les contenus d'onglets.
Enfin, nous affichons celui qui correspond à l'ID.

<div class="tabs">
  <button class="tab" onclick="openTab('services')">Services</button>
  <button class="tab" onclick="openTab('contact')">Contact</button>
</div>

<div id="services" class="tab-content">Nos services sont répertoriés ici.</div>
<div id="contact" class="tab-content" style="display:none;">Contactez-nous à contact@example.com.</div>

<script>
  function openTab(tabId) {
    // Masquer tout le contenu des onglets
    document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
    // Afficher l'onglet sélectionné
    document.getElementById(tabId).style.display = 'block';
  }
</script>

Défi

Facile

Nous avons déjà écrit la fonction JavaScript qui fait fonctionner les onglets. Votre tâche :

Ajoutez l'attribut onclick à chaque bouton d'onglet afin que le fait de cliquer sur un onglet affiche le contenu correct
Appelez la fonction openTab().
Passez l'id du contenu de l'onglet (home, about, ou contact).

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Simple Tabs Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="tabs">
    <!-- Each button calls the function and passes the tab's ID -->
    <button class="tab" >Home</button>
    <button class="tab" >About</button>
    <button class="tab" >Contact</button>
  </div>

  <!-- By default, only "Home" is visible -->
  <div id="home" class="tab-content">Welcome to the homepage!</div>
  <div id="about" class="tab-content" style="display:none;">Learn more about us here.</div>
  <div id="contact" class="tab-content" style="display:none;">Get in touch with us.</div>

  <script src="script.js"></script>
</body>
</html>