Faner på JavaScript

Nå skal vi implementere faner. Se umiddelbart på eksempelet av det som kreves av deg:

Studer også oppsettet som vi skal løse oppgaven på:

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

Legg merke til at den aktive lenken og den aktive fanen har klassen active.

Diskusjon

La oss nå diskutere hvordan vi skal løse denne oppgaven. Det er åpenbart at lenkene på en måte må kobles til de tilsvarende fanene. I denne leksjonen fra den teoretiske læreboken har vi allerede gått gjennom mulige alternativer.

I dette tilfellet foreslår jeg å koble lenker og faner ganske enkelt etter posisjon: den første lenken vil åpne den første fanen, den andre lenken - den andre fanen, og så videre.

Den generelle algoritmen vil se slik ut: ved klikk på en knapp må vi finne lenken med klassen og fjerne denne klassen fra den. På samme måte må vi finne fanen med denne klassen og også fjerne klassen fra den.

Deretter må vi ta lenken som ble klikket på og aktivere den. Så må vi ta fanen som har samme nummer som lenken vår - og også aktivere den.

Kopier HTML- og CSS-kodene som er vist. Implementer faner i henhold til den beskrevne algoritmen.