Oortjies op JavaScript

Nou sal ons oortjies implementeer. Kyk dadelik na die voorbeeld van wat van jou vereis word:

Bestudeer ook die opmaak waarop ons die probleem sal oplos:

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

Let daarop dat die aktiewe skakel en die aktiewe oortjie die klas active het.

Bespreking

Laat ons nou bespreek hoe om hierdie probleem op te los. Dit is duidelijk dat die skakels op een of ander manier gekoppel moet word aan die oortjies wat daarmee ooreenstem. In hierdie les uit die teoretiese handboek het ons reeds die moontlike opsies behandel.

In hierdie geval stel ek voor om skakels en oortjies bloot volgens posisie te koppel: die eerste skakel sal die eerste oortjie oopmaak, die tweede skakel - die tweede oortjie, ensovoorts.

Die algemene algoritme sal so lyk: by 'n klik op die knoppie moet ons die skakel met die klas vind en daardie klas daarvan verwyder. Op soortgelyke wyse moet ons die oortjie met daardie klas vind en ook daardie klas daarvan verwyder.

Daarna moet ons die skakel waarop geklik is, neem en dit aktiveer. Dan moet ons die oortjie neem wat dieselfde nommer het, soos ons skakel - en dit ook aktiveer.

Kopieer die gegewe HTML- en CSS-kodes vir jouself. Implementeer oortjies volgens die beskryfde algoritme.