ЈаваScript табови

Сега ќе имплементираме табови. Веднаш погледнете го примерот на она што се бара од вас:

Проучете ја и верстката на која ќе ја решаваме задачата:

<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 кодови. Имплементирајте табови според опишаниот алгоритам.