Tabs

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

Tabs sind eine Möglichkeit, Inhalte in separate Abschnitte zu organisieren und dabei alles auf einer einzigen Seite zu behalten. Anstatt eine lange Seite zu scrollen, können Benutzer durch Klicken auf einen Tab zwischen verschiedenen Inhaltsbereichen wechseln. Man sieht Tabs häufig in Einstellungsseiten, Dashboards oder Produktbeschreibungen (z. B. Details, Bewertungen, FAQ).

Wir können Tabs ohne JavaScript erstellen, indem wir Folgendes verwenden:

Radio-Buttons (damit immer nur ein Tab gleichzeitig aktiv sein kann)
Labels, die als anklickbare Tab-Buttons fungieren
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>
  /* Radio-Buttons ausblenden */
  input { display: none; }

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

  /* Inhalt standardmäßig ausgeblendet */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* Inhalt anzeigen, wenn Radio-Button ausgewählt ist */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* Aktiven Tab hervorheben */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

Hier ist eine kurze Gedankenstütze, die Sie Ihren Schülern geben könnten:

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

Aufgabe

Einfach

Ihnen wird ein Starter-HTML mit zwei bereits eingerichteten Tabs zur Verfügung gestellt. Ihre Aufgabe ist es, das Tab-System zu erweitern und zu verbessern.

Fügen Sie einen weiteren Tab für “Sleep” hinzu:
- Label: Sleep
- Inhalt: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
Fügen Sie #tab3:checked ~ #content3 zu dem CSS-Selektor hinzu, der den Tab-Inhalt anzeigt, wenn er ausgewählt ist.

Spickzettel

Erstellen Sie Tabs ohne JavaScript mit Radio-Buttons, Labels und CSS-Selektoren:

HTML-Struktur:

<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 für die Tab-Funktionalität:

/* Radio-Buttons ausblenden */
input { display: none; }

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

/* Inhalt standardmäßig ausblenden */
.tab-content { 
  display: none; 
  padding: 10px; 
  border: 1px solid #ccc; 
}

/* Inhalt anzeigen, wenn Radio-Button ausgewählt ist */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

/* Aktiven Tab hervorheben */
#tab1:checked + label,
#tab2:checked + label {
  background: steelblue;
  color: white;
}

CSS-Geschwister-Selektoren:

+ (direkter Nachbar) → wählt das unmittelbar folgende Element aus
~ (allgemeines Geschwisterelement) → wählt jedes folgende Geschwisterelement aus

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>