Välilehdet JavaScriptillä

Nyt toteutamme välilehdet. Katso heti millaista lopputulosta sinulta odotetaan:

Tutki myös sitä HTML-merkintää, jolla ratkaisemme tehtävän:

<div id="parent">
	<div class="menu">
		<a href="" class="active">välilehti 1</a>
		<a href="">välilehti 2</a>
		<a href="">välilehti 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			välilehden 1 teksti
		</div>
		<div class="tab">
			välilehden 2 teksti
		</div>
		<div class="tab">
			välilehden 3 teksti
		</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;
}

Huomaa, että aktiivisella linkillä ja aktiivisella välilehdellä on luokka active.

Keskustelu

Keskustellaan nyt siitä, kuinka tämä tehtävä ratkaistaan. On selvää, että linkit on jotenkin yhdistettävä vastaaviin välilehtiin. Tätä oppituntia teoreettisesta oppikirjasta olemme jo käyneet läpi mahdollisia vaihtoehtoja.

Tässä tapauksessa ehdotan, että linkit ja välilehdet yhdistetään yksinkertaisesti sijainnin perusteella: ensimmäinen linkki avaa ensimmäisen välilehden, toinen linkki - toisen välilehden ja niin edelleen.

Yleinen algoritmi näyttää tältä: napsautettaessa linkkiä meidän on löydettävä linkki, jolla on luokka ja poistettava siitä tämä luokka. Samalla tavalla meidän on löydettävä välilehti, jolla on tämä luokka, ja myös poistettava siitä tämä luokka.

Sitten meidän on otettava linkki, jota klikattiin ja aktivoitava se. Sitten meidän on otettava välilehti, jolla on sama numero kuin linkillämme - ja myös aktivoitava se.

Kopioi itsellesi annetut HTML- ja CSS-koodit. Toteuta välilehdet kuvatun algoritmin mukaisesti.