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 դասը։

Քննարկում

Այժմ եկեք քննարկենք, թե ինչպես լուծել այս խնդիրը։ Ակնհայտ է, որ պետք է ինչ-որ կերպ կապել հղումները դրանց համապատասխան ներդիրների հետ։ Տեսական դասագրքի այս դասում մենք արդեն վերլուծել ենք հնարավոր տարբերակները։

Այս դեպքում ես առաջարկում եմ հղումները և ներդիրները կապել պարզապես դիրքով․ առաջին հղումը կբացի առաջին ներդիրը, երկրորդ հղումը ՝ երկրորդ ներդիրը և այդպես շարունակ։

Ընդհանուր ալգորիթմը կունենա հետևյալ տեսքը․ սեղմելու դեպքում կոճակի վրա մենք պետք է գտնենք active դասով հղումը և հանենք այդ դասը։ Նույն կերպ մենք պետք է գտնենք այդ դասով ներդիրը և նույնպես հանենք դասը։

Այնուհետև մենք պետք է վերցնենք այն հղումը, որի վրա կատարվել է կլիկը և ակտիվացնենք այն։ Ապա մենք պետք է վերցնենք ներդիրը, որն ունի նույն համարը, ինչ մեր հղումը, և նույնպես ակտիվացնենք այն։

Պատճենեք ձեզ տրված HTML և CSS կոդերը։ Իրականացրեք ներդիրներ նկարագրված ալգորիթմի համաձայն։