Skedat në JavaScript

Tani do të implementojmë skeda. Menjëherë shikoni mostrën e asaj që kërkohet nga ju:

Studioni gjithashtu markup-un mbi të cilin do ta zgjidhim detyrën:

<div id="parent">
	<div class="menu">
		<a href="" class="active">skeda 1</a>
		<a href="">skeda 2</a>
		<a href="">skeda 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			teksti i skedës 1
		</div>
		<div class="tab">
			teksti i skedës 2
		</div>
		<div class="tab">
			teksti i skedës 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;
}

Kushtojini vëmendje faktit që lidhja aktive dhe skeda aktive kanë klasën active.

Diskutim

Tani le të diskutojmë se si ta zgjidhim këtë detyrë. Është e qartë që duhet të lidhim disi lidhjet me skedat përkatëse. Në këtë mësim të librit teorik kemi diskutuar tashmë opsionet e mundshme.

Në këtë rast unë propozoj të lidhim lidhjet dhe skedat thjesht sipas pozitës: lidhja e parë do të hapë skedën e parë, lidhja e dytë - skedën e dytë, e kështu me radhë.

Algoritmi i përgjithshëm do të duket kështu: me klikimin në butonin ne duhet të gjejmë lidhjen me klasën dhe t'ia heqim atij këtë klasë. Në mënyrë të ngjashme ne duhet të gjejmë skedën me këtë klasë dhe t'ia heqim gjithashtu këtë klasë.

Pastaj ne duhet të marrim lidhjen, mbi të cilën është klikuar dhe ta aktivizojmë atë. Pastaj ne duhet të marrim skedën, e cila ka të njëjtin numër si lidhja jonë - dhe gjithashtu ta aktivizojmë atë.

Kopjoni kodet e dhëna HTML dhe CSS. Implementoni skedat sipas algoritmit të përshkruar.