Zavihki v JavaScript

Trenutno bomo implementirali zavihke. Takoj poglejte vzorec tega, kar se zahteva od vas:

Preučite tudi razporeditev, na kateri bomo reševali nalogo:

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

Bodite pozorni na to, da imata aktivna povezava in aktivni zavihek razred active.

Razprava

Zdaj pa se pogovorimo o tem, kako rešiti to nalogo. Očitno je, da je treba na nek način povezati povezave z ustreznimi zavihki. V tej lekciji iz teoretičnega učbenika smo že obravnavali mogoče možnosti.

V tem primeru predlagam, da povežemo povezave in zavihke preprosto po položaju: prva povezava bo odprla prvi zavihek, druga povezava - drugi zavihek in tako naprej.

Splošni algoritem bo videti takole: ob kliku na gumb moramo najti povezavo z razredom in ji odstraniti ta razred. Na podoben način moramo najti zavihek s tem razredom in tudi njemu odstraniti ta razred.

Nato moramo vzeti povezavo, na katero je bil klik, in jo aktivirati. Nato moramo vzeti zavihek, ki ima enako številko, kot naša povezava - in ga prav tako aktivirati.

Kopirajte si navedene HTML in CSS kode. Implementirajte zavihke v skladu z opisanim algoritmom.