Flikar i JavaScript

Nu ska vi implementera flikar. Titta genast på exemplet på vad som krävs av dig:

Studera även den HTML-struktur som vi ska lösa uppgiften på:

<div id="parent">
	<div class="menu">
		<a href="" class="active">flik 1</a>
		<a href="">flik 2</a>
		<a href="">flik 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			text för flik 1
		</div>
		<div class="tab">
			text för flik 2
		</div>
		<div class="tab">
			text för flik 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;
}

Lägg märke till att den aktiva länken och den aktiva fliken har klassen active.

Diskussion

Låt oss nu diskutera hur man löser denna uppgift. Uppenbarligen måste man på något sätt koppla länkarna till deras motsvarande flikar. I denna lektionen från den teoretiska läroboken har vi redan gått igenom möjliga alternativ.

I det här fallet föreslår jag att man kopplar länkarna och flikarna helt enkelt efter position: den första länken kommer att öppna den första fliken, den andra länken - den andra fliken och så vidare.

Den generella algoritmen kommer att se ut så här: vid ett klick på en knapp måste vi hitta länken med klassen och ta bort den klassen från den. På samma sätt måste vi hitta fliken med denna klass och också ta bort klassen från den.

Sedan måste vi ta länken som blev klickad på och aktivera den. Sedan måste vi ta fliken som har samma nummer som vår länk - och också aktivera den.

Kopiera den medföljande HTML- och CSS-koden till dig. Implementera flikar enligt den beskrivna algoritmen.