Skirtukai JavaScript

Dabar įgyvendinsime skirtukus. Iš karto pažiūrėkite į pavyzdį to, ko reikia nuo jūsų:

Taip pat išnagrinėkite išdėstymą, kuriame spręsime užduotį:

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

Atkreipkite dėmesį į tai, kad aktyvi nuoroda ir aktyvus skirtukas turi klasę active.

Aptarimas

Dabar aptarkime, kaip išspręsti šią užduotį. Akivaizdu, kad reikia kaip nori susieti nuorodas su atitinkančiais skirtukais. Šioje pamokoje iš teorinės vadovėlio mes jau nagrinėjome galimus variantus.

Šiuo atveju siūlau susieti nuorodas ir skirtukus tiesiog pagal poziciją: pirmoji nuoroda atvers pirmąjį skirtuką, antroji nuoroda - antrąjį skirtuką ir taip toliau.

Bendras algoritmas atrodys taip: paspaudus mygtuką turime rasti nuorodą su klase ir pašalinti jai šią klasę. Analogišku būdu turime rasti skirtuką su šia klase ir taip pat pašalinti jai šią klasę.

Tada turime paimti nuorodą, ant kurios buvo spustelėta, ir ją suaktyvinti. Tada turime paimti skirtuką, kuris turi tokį patį numerį, kaip ir mūsų nuoroda - ir taip pat jį suaktyvinti.

Nukopijuokite pateiktus HTML ir CSS kodus. Įgyvendinkite skirtukus pagal aprašytą algoritmą.