Záložky v JavaScriptu

Nyní implementujeme záložky. Okamžitě se podívejte na ukázku toho, co je požadováno:

Prostudujte také značkování, na kterém budeme řešit ú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šimněte si, že aktivní odkaz a aktivní záložka mají třídu active.

Diskuse

Pojďme nyní diskutovat o tom, jak tuto úlohu řešit. Je zřejmé, že je třeba nějak propojit odkazy s odpovídajícími záložkami. V této lekci z teoretické učebnice jsme již rozebírali možné varianty.

V tomto případě navrhuji propojit odkazy a záložky jednoduše podle pozice: první odkaz bude otevírat první záložku, druhý odkaz - druhou záložku atd.

Obecný algoritmus bude vypadat takto: po kliknutí na tlačítko musíme najít odkaz s třídou a odstranit jí tuto třídu. Stejným způsobem musíme najít záložku s touto třídou a jí také tuto třídu odstranit.

Poté musíme vzít odkaz, na který došlo ke kliknutí a aktivovat jej. Poté musíme vzít záložku, která má stejné číslo, jako náš odkaz - a také ji aktivovat.

Zkopírujte si uvedené HTML a CSS kódy. Implementujte záložky podle popsaného algoritmu.