JavaScriptтеги менюлер

Азыр биз менюлерди ишке ашырабыз. Дароо сизден талап кылынган нерсенин үлгүсүн караңыз:

Ошондой эле биз маселе чече турган верстканы изилдеңиз:

<div id="parent">
	<div class="menu">
		<a href="" class="active">меню 1</a>
		<a href="">меню 2</a>
		<a href="">меню 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			менюнун 1-тексти
		</div>
		<div class="tab">
			менюнун 2-тексти
		</div>
		<div class="tab">
			менюнун 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;
}

Белгилүү болгондордой, активдүү шилтеме жана активдүү меню active классын ээ.

Талкуу

Эми бул маселени кантип чечүү керектигин талкуулайлы. Ачык, шилтемелерди аларга тиешелүү менюлер менен бир жерге байланыштыруу керек. Бул сабакта теориялык окуу китебинен биз мүмкүн болгон варианттарды карап чыктык.

Бул учурда мен шилтемелерди жана менюлерди позиция боюнча жөн гана байланыштырууну сунуштайм: биринчи шилтеме биринчи менюну ачат, экинчи шилтеме - экинчи менюну ж.б.у.с.

Жалпы алгоритм төмөнкүдөй болот: баскычты басканда классы бар шилтемени таап, андан бул классты алып салуу керек. Ошол сыяктуу эле ушул классты тагынган менюну таап, дагы ошол классты алып салуу керек.

Андан кийин биз чыкылдатылган шилтемени алып, аны активдештирүү керек. Андан кийин биз шилтемебиз менен ошол эле номери бар менюну алып - жана аны дагы активдештирүү керек.

Берилген HTML жана CSS коддорун өзүңүзгө көчүрүп алыңыз. Сүрөттөлгөн алгоритм боюнча менюлерди ишке ашырыңыз.