Tabbladen in JavaScript

Nu gaan we tabbladen implementeren. Bekijk meteen een voorbeeld van wat er van je verwacht wordt:

Bestudeer ook de opmaak waarop we het probleem gaan oplossen:

<div id="parent">
	<div class="menu">
		<a href="" class="active">tabblad 1</a>
		<a href="">tabblad 2</a>
		<a href="">tabblad 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			tekst van tabblad 1
		</div>
		<div class="tab">
			tekst van tabblad 2
		</div>
		<div class="tab">
			tekst van tabblad 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;
}

Let op het feit dat de actieve link en het actieve tabblad de klasse active hebben.

Discussie

Laten we nu bespreken hoe we dit probleem moeten oplossen. Het is duidelijk dat we op de een of andere manier de links moeten koppelen aan de bijbehorende tabbladen. In deze les uit het theoretische leerboek hebben we de mogelijke opties al besproken.

In dit geval stel ik voor om de links en tabbladen simpelweg op positie te koppelen: de eerste link zal het eerste tabblad openen, de tweede link - het tweede tabblad, enzovoort.

Het algemene algoritme ziet er als volgt uit: bij het klikken op een knop moeten we de link met de klasse vinden en deze klasse verwijderen. Op dezelfde manier moeten we het tabblad met deze klasse vinden en ook deze klasse verwijderen.

Vervolgens moeten we de link waarop geklikt is activeren. Daarna moeten we het tabblad nemen dat hetzelfde nummer heeft als onze link - en deze ook activeren.

Kopieer de gegeven HTML- en CSS-codes. Implementeer de tabbladen volgens het beschreven algoritme.