Záložky v JavaScripte

Teraz implementujeme záložky. Okamžite si pozrite ukážku toho, čo sa od vás vyžaduje:

Preštudujte si aj HTML a CSS, na ktorom budeme riešiť úlohu:

<div id="parent">
	<div class="menu">
		<a href="" class="active">záložka 1</a>
		<a href="">záložka 2</a>
		<a href="">záložka 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			text záložky 1
		</div>
		<div class="tab">
			text záložky 2
		</div>
		<div class="tab">
			text záložky 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;
}

Všimnite si, že aktívny odkaz a aktívna záložka majú triedu active.

Diskusia

Poďme teraz diskutovať o tom, ako vyriešiť túto úlohu. Je zrejmé, že treba nejako spojiť odkazy s im príslušnými záložkami. V tejto lekcii z teoretickej učebnice sme už rozoberali možné varianty.

V tomto prípade navrhujem spojiť odkazy a záložky jednoducho podľa pozície: prvý odkaz otvorí prvú záložku, druhý odkaz - druhú záložku atď.

Všeobecný algoritmus bude vyzerať takto: po kliknutí na tlačidlo musíme nájsť odkaz s triedou a odobrať mu túto triedu. Podobným spôsobom musíme nájsť záložku s touto triedou a tiež jej túto triedu odobrať.

Potom musíme vziať odkaz, na ktorý bol kliknutý a aktivovať ho. Potom musíme vziať záložku, ktorá má rovnaké číslo, ako náš odkaz - a tiež ju aktivovať.

Skopírujte si uvedené HTML a CSS kódy. Realizujte záložky podľa opísaného algoritmu.