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