Zakładki w JavaScript

Teraz zaimplementujemy zakładki. Od razu spójrz na przykład tego, co jest wymagane:

Przeanalizuj również układ, na którym będziemy rozwiązywać zadanie:

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

Zwróć uwagę na to, że aktywny link i aktywna zakładka mają klasę active.

Dyskusja

Omówmy teraz, jak rozwiązać to zadanie. Oczywiście, że trzeba w jakiś sposób powiązać linki z odpowiadającymi im zakładkami. W tej lekcji z podręcznika teoretycznego już analizowaliśmy możliwe opcje.

W tym przypadku proponuję powiązać linki i zakładki po prostu według pozycji: pierwszy link będzie otwierał pierwszą zakładkę, drugi link - drugą zakładkę i tak dalej.

Ogólny algorytm będzie wyglądał tak: po kliknięciu na przycisk musimy znaleźć link z klasą i usunąć jej tę klasę. W analogiczny sposób musimy znaleźć zakładkę z tą klasą i również usunąć jej tę klasę.

Następnie musimy wziąć link, na który został kliknięty i aktywować go. Potem musimy wziąć zakładkę, która ma ten sam numer, co nasz link - i również ją aktywować.

Skopiuj sobie podane kody HTML i CSS. Zaimplementuj zakładki zgodnie z opisanym algorytmem.