Cilnes JavaScript

Tagad mēs ieviensim cilnes. Nekavējoties aplūkojiet paraugu tam, kas no jums tiek prasīts:

Izpētiet arī izkārtojumu, uz kura mēs risināsim uzdevumu:

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

Pievērsiet uzmanību tam, ka aktīvajai saitei un aktīvajai cilnei ir klase active.

Diskusija

Tagad apspriedīsim, kā atrisināt šo uzdevumu. Acīmredzami, ka saites ir jāsaista ar atbilstošajām cilnēm. Šajā nodarbībā no teorētiskā mācību grāmata mēs jau esam apskatījuši iespējamos variantus.

Šajā gadījumā es ierosinu saistīt saites un cilnes vienkārši pēc pozīcijas: pirmā saite atvērs pirmo cilni, otrā saite - otro cilni un tā tālāk.

Vispārīgais algoritms izskatīsies šādi: noklikšķinot uz pogas mums jāatrod saite ar klasi un jānoņem tai šī klase. Līdzīgi mums jāatrod cilne ar šo klasi un arī jānoņem tai šī klase.

Pēc tam mums jāpaņem saite, uz kuras tika noklikšķināts, un jāaktivizē tā. Tad mums jāpaņem cilne, kurai ir tāds pats numurs, kā mūsu saitei - un arī jāaktivizē tā.

Nokopējiet sev norādītos HTML un CSS kodrus. Ieviešiet cilnes saskaņā ar aprakstīto algoritmu.