Tabovi na JavaScript-u

Sada ćemo implementirati tabove. Odmah pogledajte primer onoga što se od vas zahteva:

Proučite i markup na kome ćemo rešavati zadatak:

<div id="parent">
	<div class="menu">
		<a href="" class="active">tab 1</a>
		<a href="">tab 2</a>
		<a href="">tab 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			tekst taba 1
		</div>
		<div class="tab">
			tekst taba 2
		</div>
		<div class="tab">
			tekst taba 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;
}

Obratite pažnju na to da aktivni link i aktivni tab imaju klasu active.

Diskusija

Hajde sada da razmotrimo kako rešiti ovaj zadatak. Očigledno je da je potrebno nekako povezati linkove sa odgovarajućim tabovima. U ovoj lekciji iz teorijskog udžbenika već smo razmatrali moguće opcije.

U ovom slučaju predlažem da povežemo linkove i tabove jednostavno po poziciji: prvi link će otvoriti prvi tab, drugi link - drugi tab i tako dalje.

Opšti algoritam će izgledati ovako: pritiskom na dugme treba da pronađemo link sa klasom i da mu uklonimo tu klasu. Na sličan način treba da pronađemo tab sa tom klasom i takođe da mu uklonimo tu klasu.

Zatim treba da uzmemo link na koji je bio klik i da ga aktiviramo. Zatim treba da uzmemo tab koji ima isti broj, kao i naš link - i takođe da ga aktiviramo.

Kopirajte sebi date HTML i CSS kodove. Implementirajte tabove prema opisanom algoritmu.