Wie man Tabs erstellt:

Lernen Sie, wie Sie mit CSS und JavaScript Tabs erstellen.

Erstellen Sie umschaltbare Tabs

Schritt 1 - Fügen Sie HTML hinzu:

<!-- Tab-Links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab-Inhalte -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London ist die Hauptstadt von England.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris ist die Hauptstadt von Frankreich.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo ist die Hauptstadt von Japan.</p>
</div>

Erstellen Sie Schaltflächen, um bestimmte Registerkarteinhalt zu öffnen. Alle mit class="tabcontent" der <div> Elemente sind standardmäßig alle versteckt (durch CSS und JS). Wenn der Benutzer auf die Schaltfläche klickt, öffnet sie das mit der Schaltfläche "passende" Registerkarteinhalt.

Zweiter Schritt - Fügen Sie CSS hinzu：

Stellen Sie die Schaltflächen und das Stil der Registerkarteinhalt ein：

/* Setzen Sie das Stil der Registerkarte */
.tab {
  Überlauf: verborgen;
  Rahmen: 1px fest #ccc;
  Hintergrundfarbe: #f1f1f1;
}
/* Setzen Sie das Stil der Schaltflächen zur Öffnung der Registerkarteinhalt */
.tab button {
  Hintergrundfarbe: vererbt;
  Schwimmen: links;
  Rahmen: none;
  Umriss: none;
  Zeiger: Zeiger;
  Auffüllung: 14px 16px;
  Übergang: 0.3s;
}
/* Ändern Sie die Hintergrundfarbe des Buttons bei der Überlagerung */
.tab button:hover {
  Hintergrundfarbe: #ddd;
}
/* Erstellen Sie die Klasse für die aktive/aktuelle Registerkartenverknüpfung */
.tab button.active {
  Hintergrundfarbe: #ccc;
}
/* Setzen Sie das Stil der Registerkarteinhalt */
.tabcontent {
  Anzeige: none;
  Auffüllung: 6px 12px;
  Rahmen: 1px fest #ccc;
  oberer Rand: none;
}

Dritter Schritt - Fügen Sie JavaScript hinzu：

function openCity(evt, cityName) {
  // Erklären Sie alle Variablen
  var i, tabcontent, tablinks;
  // Erhalten Sie alle Elemente mit der Klasse "tabcontent" und verbergen Sie sie
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Erhalten Sie alle Elemente mit der Klasse "tablinks" und entfernen Sie die Klasse "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Zeige die aktuelle Registerkarte an und füge der Schaltfläche, die die Registerkarte öffnet, die Klasse "active" hinzu
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

亲自试一试

Registerkarte einblenden

Fügen Sie die folgenden CSS hinzu, um die Inhalte der Registerkarte einblenden zu können:

.tabcontent {
  animation: fadeEffect 1s; /* Die Einblenden- und Ausblenden-Effekte dauern 1 Sekunde */
}
/* Vom Null-Transparenz-Grad zum vollkommenen undurchsichtigen Übergang */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

亲自试一试

Registerkarte standardmäßig anzeigen

Um eine bestimmte Registerkarte beim Laden der Seite zu öffnen, verwenden Sie JavaScript, um die Schaltfläche der Registerkarte "klicken":

<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// Den Element mit id="defaultOpen" finden und klicken
document.getElementById("defaultOpen").click();
</script>

亲自试一试

Registerkarte schließen

Wenn Sie eine bestimmte Registerkarte schließen möchten, verwenden Sie JavaScript, um die Registerkarte durch Klicken auf die Schaltfläche auszublenden:

<!-- Klicken Sie auf das <span>-Element, um die Registerkarte zu schließen -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London ist die Hauptstadt von England.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>

亲自试一试

相关页面

教程：如何创建垂直标签页