JavaScript-də Vəqflər

İndi biz vəqfləri həyata keçirəcəyik. Dərhal tələb olunan nümunəyə baxın:

Həmçinin, problemi həll edəcəyimiz işarələməni də öyrənin:

<div id="parent">
	<div class="menu">
		<a href="" class="active">vəqf 1</a>
		<a href="">vəqf 2</a>
		<a href="">vəqf 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			vəqf 1 mətni
		</div>
		<div class="tab">
			vəqf 2 mətni
		</div>
		<div class="tab">
			vəqf 3 mətni
		</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;
}

Nəzərə alın ki, aktiv link və aktiv vəqf active sinfinə malikdir.

Müzakirə

Gəlin indi bu problemi necə həll edəcəyimizi müzakirə edək. Aydındır ki, linkləri uyğun vəqflərlə əlaqələndirmək lazımdır. Nəzəri dərslikdən olan bu dərsdə biz artıq mümkün variantları nəzərdən keçirmişdik.

Bu halda mən təklif edirəm ki, linklər və vəqflər sadəcə mövqeyə görə əlaqələndirilsin: birinci link birinci vəqfı, ikinci link - ikinci vəqfı açasın və s.

Ümumi alqoritim belə görünəcək: düyməyə klikləndikdə aktiv sinfi olan linki tapıb bu sinfi ondan silməliyik. Eyni şəkildə bu sinifə malik olan vəqfı tapıb ondan da bu sinfi silməliyik.

Sonra biz kliklənmiş linki götürməli və onu aktiv etməliyik. Sonra biz linkimizlə eyni nömrəyə malik olan vəqfı götürməli və onu da aktiv etməliyik.

Verilmiş HTML və CSS kodlarını özünüzə köçürün. Təsvir edilmiş alqoritimə uyğun olaraq vəqfləri həyata keçirin.