Tabs in JavaScript
Jetzt werden wir Tabs implementieren. Sehen Sie sich sofort das Beispiel an, was von Ihnen verlangt wird:
Studieren Sie auch das Markup, auf dem wir die Aufgabe lösen werden:
<div id="parent">
<div class="menu">
<a href="" class="active">Tab 1</a>
<a href="">Tab 2</a>
<a href="">Tab 3</a>
</div>
<div class="tabs">
<div class="tab active">
Text von Tab 1
</div>
<div class="tab">
Text von Tab 2
</div>
<div class="tab">
Text von Tab 3
</div>
</div>
</div>
#parent {
margin: 0 auto;
width: 400px;
}
.menu a {
margin-right: 5px;
display: inline-block;
padding: 10px;
color: black;
text-decoration: none;
border: 1px solid gray;
}
.menu a:hover {
background: #f8f8f8;
}
.menu a.active {
border-color: transparent;
background: #f2f2f2;
}
.tabs .tab:not(.active) {
display: none;
}
.tabs .tab {
padding: 10px;
background: #f2f2f2;
height: 300px;
}
Beachten Sie, dass der aktive Link
und der aktive Tab die Klasse active haben.
Diskussion
Lassen Sie uns nun besprechen, wie man diese Aufgabe löst. Offensichtlich müssen die Links mit den entsprechenden Tabs verbunden werden. In dieser Lektion aus dem theoretischen Lehrbuch haben wir bereits mögliche Optionen besprochen.
In diesem Fall schlage ich vor, die Links und Tabs einfach über die Position zu verknüpfen: der erste Link wird den ersten Tab öffnen, der zweite Link - den zweiten Tab und so weiter.
Der allgemeine Algorithmus sieht so aus: Beim Klick auf den Button müssen wir den Link mit der Klasse finden und ihr diese Klasse entfernen. Auf ähnliche Weise müssen wir den Tab mit dieser Klasse finden und ihm ebenfalls diese Klasse entfernen.
Dann müssen wir den Link, auf den geklickt wurde, aktivieren. Dann müssen wir den Tab nehmen, der die gleiche Nummer hat wie unser Link - und ihn ebenfalls aktivieren.
Kopieren Sie sich die angegebenen HTML- und CSS-Codes. Implementieren Sie die Tabs gemäß dem beschriebenen Algorithmus.
