Faneblade i JavaScript

Nu skal vi implementere faneblade. Se straks på eksemplet på, hvad der kræves af dig:

Studer også det opstilling, som vi skal løse opgaven på:

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

Vær opmærksom på, at det aktive link og den aktive fane har klassen active.

Diskussion

Lad os nu diskutere, hvordan man løser denne opgave. Det er indlysende, at man på en eller anden måde skal forbinde linkene med deres tilsvarende faneblade. I denne lektion fra den teoretiske lærebog har vi allerede gennemgået mulige muligheder.

I dette tilfælde foreslår jeg at forbinde linkene og fanebladene simpelthen efter position: det første link vil åbne den første fane, det andet link - den anden fane og så videre.

Den generelle algoritme vil se sådan ud: ved klik på knappen skal vi finde linket med klassen og fjerne klassen fra det. På samme måde skal vi finde fanebladet med denne klasse og også fjerne klassen fra det.

Derefter skal vi tage linket, der blev klikket på, og aktivere det. Derefter skal vi tage det faneblad, som har samme nummer, som vores link - og også aktivere det.

Kopier de angivne HTML- og CSS-koder til dig. Implementer faneblade i henhold til den beskrevne algoritme.