JavaScriptdeki Bellikler

Häzir biz bellikleri amala aşyrarys. Derrew talap edilýän nämäniň nusgasyna serediň:

Köpçüligimiz üçin meseläni çözjek maşyny hem öwreniň:

<div id="parent">
	<div class="menu">
		<a href="" class="active">bellik 1</a>
		<a href="">bellik 2</a>
		<a href="">bellik 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			bellik 1-iň teksti
		</div>
		<div class="tab">
			bellik 2-niň teksti
		</div>
		<div class="tab">
			bellik 3-üň teksti
		</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;
}

Işjeň çykgyt we işjeň belligiň active klassy bar bolýandygyna üns beriň.

Çekişme

Geliň indi bu meseläni nädip çözmek bardygy barada çekişeliň. Belli bolşy ýaly, çykgytlary degişli bellikler bilen birikdirmeli. Bu sapakda nazary okuw kitabynyň mümkin bolan wariantlaryny düşündik.

Bu ýagdaýda, men çykgytlary we bellikleri ýönekeý ýagdaýy boýunça birikdirmegi teklip edýärin: birinji çykgyt birinji belligi açmaly, ikinji çykgyt - ikinji bellik we şuňa meňzeş.

Umumy algoritm şuňa meňzeş görüner: düwmä basylanda biz klasly çykgyt tapmaly we oňa bu klassy aýyrmaly. Şuňa meňzeş ýagdaýda biz bu klasly belligi tapmaly we oňa hem bu klassy aýyrmaly.

Soňra basylan çykgydy almaly we ony işjeňleşdirmeli. Soňra bellik almaly, çykgydymyz bilen deň nomerli bolan - we hem ony işjeňleşdirmeli.

Berlen HTML we CSS kodlaryny özüňize göçüriň. Görkezilen algoritma boýunça bellikleri amala aşyryň.