JavaScript'te Sekmeler

Şimdi sekmeleri uygulayacağız. Hemen sizden istenenin örneğine bir göz atın:

Görevi çözeceğimiz HTML yapısını da inceleyin:

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

Aktif bağlantının ve aktif sekmenin active sınıfına sahip olduğuna dikkat edin.

Tartışma

Şimdi bu sorunu nasıl çözeceğimizi tartışalım. Açıkçası, bağlantıları ilgili sekmelerle bir şekilde ilişkilendirmemiz gerekiyor. Teorik ders kitabındaki bu derste olası seçenekleri zaten inceledik.

Bu durumda, bağlantıları ve sekmeleri basitçe konuma göre ilişkilendirmeyi öneriyorum: ilk bağlantı ilk sekmeyi, ikinci bağlantı ikinci sekmeyi açacak ve böyle devam edecek.

Genel algoritma şöyle görünecek: bir bağlantıya tıklandığında, active sınıfına sahip bağlantıyı bulup bu sınıfı kaldırmalıyız. Benzer şekilde, bu sınıfa sahip sekmeyi bulup onun da bu sınıfını kaldırmalıyız.

Daha sonra, tıklanan bağlantıyı alıp aktif hale getirmeliyiz. Ardından, bağlantımızla aynı numaraya sahip olan sekmeyi alıp onu da aktif hale getirmeliyiz.

Verilen HTML ve CSS kodlarını kendinize kopyalayın. Açıklanan algoritmaya göre sekmeleri uygulayın.