JavaScriptda Varaqlar

Hozir biz varaqlarni amalga oshiramiz. Darhol sizdan talab qilinadigan namunani ko'rib chiqing:

Shuningdek, biz masalani yechadigan verstkani ham o'rganing:

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

Faol havola va faol varaq active klassiga ega ekanligiga e'tibor bering.

Muhokama

Keling, endi bu masalani qanday hal qilish kerakligini muhokama qilaylik. Havolalarni ularga mos keladigan varaqlar bilan qandaydir bog'lash kerakligi aniq. Ushbu darsda nazariy qo'llanmadan biz mumkin bo'lgan variantlarni ko'rib chiqdik.

Bu holda men havolalar va varaqlarni oddiygina pozitsiya bo'yicha bog'lashni taklif qilaman: birinchi havola birinchi varaqni ochadi, ikkinchi havola - ikkinchi varaqni ochadi va hokazo.

Umumiy algoritm quyidagicha ko'rinadi: tugmani bosish orqali biz klassga ega havolani topamiz va undan bu klassni olib tashlaymiz. Xuddi shunday biz bu klassga ega varaqni topishimiz va undan ham bu klassni olib tashlashimiz kerak.

Keyin biz bosilgan havolani olishimiz va uni faollashtirishimiz kerak. Keyin biz hozirgi havolamiz bilan bir xil raqamga ega bo'lgan varaqni olishimiz kerak - va uni ham faollashtirishimiz kerak.

Keltirilgan HTML va CSS kodlarini o'zingizga nusxalang. Tavsiflangan algoritm asosida varaqlarni amalga oshiring.