Onglets

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 1 sur 27.

Les onglets permettent aux utilisateurs de passer d’un contenu à un autre 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 lui transmettons l’ID de l’onglet.

Dans la fonction, nous utilisons querySelectorAll + forEach pour masquer tous les contenus des 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">Our services are listed here.</div>
<div id="contact" class="tab-content" style="display:none;">Contact us at contact@example.com.</div>

<script>
  function openTab(tabId) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
    // Show the selected tab
    document.getElementById(tabId).style.display = 'block';
  }
</script>

Défi

Facile

Nous avons déjà écrit la fonction JavaScript qui permet aux onglets de fonctionner. Ta tâche :

Ajoute l’attribut onclick à chaque bouton d’onglet pour qu’un clic sur un onglet affiche le contenu correspondant
Appelle la fonction openTab().
Transmets l’identifiant 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">
    <!-- Chaque bouton appelle la fonction et lui transmet l’ID de l’onglet -->
    <button class="tab" >Home</button>
    <button class="tab" >About</button>
    <button class="tab" >Contact</button>
  </div>

  <!-- Par défaut, seul "Home" est 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>