File în JavaScript

Acum vom implementa file. Uitați-vă imediat la exemplul a ceea ce vi se cere:

Studiați de asemenea și markup-ul pe care vom rezolva problema:

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

Atenție la faptul că link-ul activ și fila activă au clasa active.

Discuție

Să discutăm acum despre cum să rezolvăm această problemă. Evident, trebuie să legăm cumva link-urile de filele corespunzătoare. În această lecție din manualul teoretic am analizat deja posibilele variante.

În acest caz, propun să legăm link-urile și filele pur și simplu după poziție: primul link va deschide prima filă, al doilea link - a doua filă și așa mai departe.

Algoritmul general va arăta astfel: la click pe buton trebuie să găsim link-ul cu clasa și să îi eliminăm această clasă. În mod similar trebuie să găsim fila cu această clasă și de asemenea să îi eliminăm această clasă.

Apoi trebuie să luăm link-ul pe care s-a făcut click și să îl activăm. Apoi trebuie să luăm fila care are același număr, ca și link-ul nostru - și de asemenea să o activăm.

Copiați codurile HTML și CSS date. Implementați filele conform algoritmului descris.