Tabs

Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 21 von 35.

Tabs sind eine Möglichkeit, Inhalte in separate Bereiche zu organisieren und dabei alles auf einer Seite zu behalten. Anstatt durch eine lange Seite zu scrollen, können Nutzer zwischen Inhaltsbereichen wechseln, indem sie auf einen Tab klicken. Tabs sieht man häufig auf Einstellungsseiten, in Dashboards oder bei Produktbeschreibungen (z. B. Details, Bewertungen, FAQ).

Wir können Tabs ohne JavaScript erstellen mit:

Optionsfeldern (sodass immer nur ein Tab aktiv sein kann)
Beschriftungen, die als anklickbare Tab-Schaltflächen dienen
CSS-Selektoren (:checked), um den richtigen Inhalt anzuzeigen

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>
  /* Hide radios */
  input { display: none; }

  /* Tab labels */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* Content hidden by default */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

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

  /* Highlight active tab */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

Hier ist eine kurze Erinnerung, die du den Lernenden geben könntest:

+ (benachbartes Geschwisterelement) → wählt das unmittelbar nächste Element aus.
~ (allgemeines Geschwisterelement) → wählt jedes folgende Geschwisterelement aus (nicht nur das nächste).

Aufgabe

Einfach

Du erhältst ein Starter-HTML mit zwei bereits eingerichteten Tabs. Deine Aufgabe besteht darin, das Tab-System zu erweitern und zu verbessern.

Füge einen weiteren Tab für “Sleep” hinzu:
- Beschriftung: Sleep
- Inhalt: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
Füge #tab3:checked ~ #content3 zum CSS-Selektor hinzu, der den Tab-Inhalt anzeigt, wenn er aktiviert ist.

Probier es selbst

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