Укладкі на JavaScript

Зараз мы рэалізуем укладкі. Адразу паглядзіце на ўзор таго, што ад вас патрабуецца:

Вывучыце таксама верстку, на якой мы будзем вырашаць задачу:

<div id="parent">
	<div class="menu">
		<a href="" class="active">укладка 1</a>
		<a href="">укладка 2</a>
		<a href="">укладка 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			тэкст укладкі 1
		</div>
		<div class="tab">
			тэкст укладкі 2
		</div>
		<div class="tab">
			тэкст укладкі 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;
}

Звярніце ўвагу на тое, што актыўная спасылка і актыўная ўкладка маюць клас active.

Абмеркаванне

Давайце зараз абмеркуем тое, як вырашаць гэтую задачу. Відавоўна, што трэба як-то звязаць спасылкі з адпаведнымі ім укладкамі. У даным ўроку з тэарэтычнага падручніка мы ўжо разбіралі магчымыя варыянты.

У даным выпадку я прапаную звязаць спасылкі і ўкладкі проста па пазіцыі: першая спасылка будзе адкрываць першую ўкладку, другая спасылка - другую ўкладку і гэтак далей.

Агульны алгарытм будзе выглядаць так: па націску на кнопку мы павінны знайсці спасылку з класам і забраць ёй гэты клас. Аналагічным чынам мы павінны знайсці ўкладку з гэтым класам і таксама забраць ёй гэты клас.

Затым мы павінны ўзяць спасылку, на якую быў клік і актываваць яе. Затым мы павінны ўзяць укладку, якая мае такі ж нумар, як і наша спасылка - і таксама актываваць яе.

Скапіруйце сабе прыведзеныя HTML і CSS коды. Рэалізуйце ўкладкі згодна з апісаным алгарытмам.