Tabs

Teil des Abschnitts JavaScript in Aktion der HTML-Journey von Coddy. Lektion 1 von 27.

Mit Tabs können Nutzer zwischen verschiedenen Inhalten wechseln, ohne die Seite zu verlassen. Du kannst sie allein mit HTML und CSS erstellen, aber hier verwenden wir JavaScript.

Wichtige Punkte:

Wir verwenden die display-Eigenschaft (none / block), um Elemente auszublenden und anzuzeigen.
Wenn der Benutzer auf einen Tab klickt, rufen wir die Funktion auf und übergeben die ID des Tabs.

Innerhalb der Funktion verwenden wir querySelectorAll + forEach, um alle Tab-Inhalte auszublenden.
Zum Schluss zeigen wir den Inhalt an, der zur ID passt.

<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>

Aufgabe

Einfach

Wir haben die JavaScript-Funktion, die die Tabs funktionieren lässt, bereits geschrieben. Deine Aufgabe:

Füge jeder Tab-Schaltfläche das Attribut onclick hinzu, damit beim Klicken auf einen Tab der richtige Inhalt angezeigt wird
Rufe die Funktion openTab() auf.
Übergib die ID des Tab-Inhalts (home, about oder contact).

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Simple Tabs Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="tabs">
    <!-- Jede Schaltfläche ruft die Funktion auf und übergibt die ID des Tabs -->
    <button class="tab" >Home</button>
    <button class="tab" >About</button>
    <button class="tab" >Contact</button>
  </div>

  <!-- Standardmäßig ist nur "Home" sichtbar -->
  <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>