ჩანართები 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 კოდები დააკოპირეთ. განახორციელეთ ჩანართები აღწერილი ალგორითმის მიხედვით.