Варзишҳо дар 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 кодҳои додашударо ба худ нусхабардорӣ кунед. Варзишҳоро мувофиқи алгоритми тавсифшуда татбиқ кунед.