JavaScript-те қойындылар

Қазір біз қойындыларды жүзеге асырамыз. Бірден сізден талап етілетін үлгіні қараңыз:

Сондай-ақ біз тапсырманы шешетін верстканы зерттеңіз:

<div id="parent">
	<div class="menu">
		<a href="" class="active">қoyынды 1</a>
		<a href="">қoyынды 2</a>
		<a href="">қoyынды 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			қoyынды мәтіні 1
		</div>
		<div class="tab">
			қoyынды мәтіні 2
		</div>
		<div class="tab">
			қoyынды мәтіні 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 класы бар екеніне назар аударыңыз.

Талқылау

Енді осы тапсырманы қалай шешуге болатынын талқылайық. Сілтемелерді оларға сәйкес қойындылармен біртекті байланыстыру керек екені анық. Осы сабақта теориялық оқулықтан біз мүмкін нұсқаларды қарастырдық.

Бұл жағдайда мен сілтемелер мен қoyындыларды жай ғана позиция бойынша байланыстыруды ұсынамын: бірінші сілтеме бірінші қoyындыны ашады, екінші сілтеме - екінші қoyындыны және т.с.с.

Жалпы алгоритм келесідей болады: батырманы басқан кезде біз класы бар сілтемені тауып, сол класты алып тастауымыз керек. Сол сияқты біз осы класы бар қoyындыны тауып, одан да сол класты алып тастауымыз керек.

Содан кейін біз басылған сілтемені алып, оны белсендіруіміз керек. Содан кейін біз сілтеме сияқты сол номері бар қoyындыны алып, оны да белсендіруіміз керек.

Келтірілген HTML және CSS кодтарын өзіңізге көшіріңіз. Сипатталған алгоритм бойынша қoyындыларды жүзеге асырыңыз.