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 классга эга эканлигига эътибор беринг.

Муҳокама

Келинг, энди бу масалани қандай ҳал қилишни муҳокама қилайлик. Ҳаволаларни уларга мос вкладкалар билан қандайдир боглаш кераклиги аён. Бу ҳақида /uzc/javascript/book/prime/dom/practice/many-elements-with-showing-buttons/ назарий ўқув қўлланмасидан дарсликда биз бугунча вариантларни ўрганганмиз.

Бу ҳолатда мен ҳаволалар ва вкладкаларни оддийгина ўрни билан боглашни таклиф қиламан: биринчи ҳавола биринчи вкладкани очиши, иккинчи ҳавола - иккинчи вкладкани очиши ва ҳоказо.

Умумий алгоритм шундай кўринишга эга: тугмани босганда биз класси бор ҳаволани топишимиз ва ундан бу классни олиб ташлашимиз керак. Шунингдек биз шу класси бор вкладкани топишимиз ва ундан ҳам бу классни олиб ташлашимиз керак.

Сўнгра биз босилан ҳаволани олиб уни фаоллаштиришимиз керак. Сўнгра биз ўз ҳаволамизнинг номерига эга бўлган вкладкани олиб уни ҳам фаоллаштиришимиз керак.

Келтирилган HTML ва CSS кодларни нусхалаб олинг. Тавсифланган алгоритм асосида ичма-ич вкладкаларни амалга оширинг.