Vahelehed JavaScriptis

Nüüd rakendame vahelehed. Vaadake kohe näidet sellest, mida teilt nõutakse:

Uurige ka seda veebilehe kujundust, millel me ülesannet lahendame:

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

Pange tähele, et aktiivsel lingil ja aktiivsel vahelehel on klass active.

Arutelu

Räägime nüüd sellest, kuidas seda ülesannet lahendada. Ilmselgelt tuleb lingid ja neile vastavad vahelehed kuidagi seostada. Selles õppetükis teoreetilisest õpikust oleme võimalikke variante juba läbi vaadanud.

Antud juhul soovitan lingid ja vahelehed lihtsalt positsiooni järgi seostada: esimene link avab esimese vahelehe, teine link - teise vahelehe jne.

Üldine algoritm näeb välja selline: vajutuse korral nupule peame leidma lingi, millel on klass ja eemaldama sellelt selle klassi. Samamoodi peame leidma selle klassiga vahelehe ja ka sellelt selle klassi eemaldama.

Seejärel peame võtma lingi, millele klõpsati, ja aktiveerima selle. Siis peame võtma vahelehe, millel on sama number, kui meie lingil - ja ka selle aktiveerima.

Kopeerige endale toodud HTML ja CSS koodid. Rakendage vahelehed vastavalt kirjeldatud algoritmile.