JavaScript භාවිතයෙන් ඇකෝඩියනය

දැන් අපි ඇකෝඩියනයක් ක්‍රියාත්මක කරමු. එය පැතිකඩට හරවා ඇති ටැබ් වලට සමානය. කෙසේවෙතත්, ඇකෝඩියනයකදී, සක්‍රිය සබැඳිය ක්ලික් කිරීමෙන් වත්මන් ටැබය වසා දැමිය හැකිය.

නිදර්ශනය මෙන්න:

අපි ගැටලුව විසඳන ලේඛන සැකැස්ම ද අධ්‍යයනය කරන්න:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >ටැබ් 1</a>
		</div>
		<div class="text">
			ටැබ් 1 හි පෙළ
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >ටැබ් 2</a>
		</div>
		<div class="text">
			ටැබ් 2 හි පෙළ
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >ටැබ් 3</a>
		</div>
		<div class="text">
			ටැබ් 3 හි පෙළ
		</div>
	</div>
</div>

#parent {
	margin: 0 auto;
	width: 400px;
}
.tab {
	margin-bottom: 10px;
}

.tab .link a {
	display: block;
	padding: 10px;
	color: black;
	text-decoration: none;
	text-align: center;
	background: #f8f8f8;
	border: 1px solid gray;
}
.tab .link:hover a {
	background: #f2f2f2;
}

.tab:not(.active) .text {
	display: none;
}
.tab .text {
	border: 1px dashed gray;
	border-top: none;
	
	padding: 10px;
	height: 300px;
}

සාකච්ඡාව

තාක්ෂණිකව, ඇකෝඩියනයේ HTML කේතය ටැබ් වල කේතයට වඩා පහසුය: එහිදී සබැඳි ඒවා විවෘත හා වසන ස්පොයිලරයට කෙලින්ම ඉහලින් ස්ථානගත කර ඇත. ඊට අමතරව, අපගේ ලේඛන සැකැස්මේ active වර්ගය සබැඳියේ සහ ස්පොයිලරයේ පොදු දෙමාපියට ලබා දේ.

මෙයින් අදහස් වන්නේ සබැඳියක් මත ක්ලික් කිරීමේදී පැරණි ටැබය අක්‍රිය කර නව ටැබය සක්‍රිය කළ යුතු බවයි. පැරණි ටැබය අක්‍රිය කිරීම සඳහා active වර්ගය ඇති ටැබය සොයා එයින් මෙම වර්ගය ඉවත් කළ යුතුය.

නව ටැබයක් සක්‍රිය කිරීම සඳහා, සබැඳිය මත ක්ලික් කිරීම මගින් එම සබැඳියේ දෙමාපිය ටැබය සොයා එයට active වර්ගය ලබා දිය යුතුය. තාක්ෂණිකව එවැනි සෙවීමක් මෙසේ කළ හැකිය: සරලවම tab වර්ගය ඇති සබැඳියේ ආසන්නතම දෙමාපිය සොයන්න.

ලබා දී ඇති HTML සහ CSS කේත ඔබට පිටපත් කර ගන්න. විස්තර කර ඇති ඇල්ගොරිතමයට අනුව ඇකෝඩියනය ක්‍රියාත්මක කරන්න.