ভ্যানিলা জাভাস্ক্রিপ্ট দিয়ে বর্তমান পৃষ্ঠা মেনু আইটেম হাইলাইট কিভাবে

আপনার ওয়েবসাইটের নেভিগেশন বার/মেনুতে বর্তমানে সক্রিয় পৃষ্ঠাটি কীভাবে হাইলাইট করবেন তা শিখুন।

একটি সাধারণ ওয়েবসাইট বৈশিষ্ট্য হল বর্তমান পৃষ্ঠা মেনু আইটেম হাইলাইট করা যখন ব্যবহারকারী পৃষ্ঠা থেকে পৃষ্ঠায় নেভিগেট করে।

ভ্যানিলা জাভাস্ক্রিপ্টের সাথে এটি কীভাবে করবেন তা এখানে।

ধাপ 1:একটি সাধারণ মেনু

<nav class="navbar">
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a href="/contact">Contact</a>
</nav>

ধাপ 2:CSS স্টাইলিং

কিছু ন্যূনতম CSS স্টাইলিং। এখানে গুরুত্বপূর্ণ অংশ হল .current ক্লাস, যা আমরা বর্তমান সক্রিয় পৃষ্ঠা আইটেমটিতে যোগ করব, ধাপ 3:

.navbar {
	background-color: #111;
	padding: 1rem;
}
.navbar a {
	text-decoration: none;
	color: white;
	padding: 1rem;
}

.current {
	color: #df3e23;
}

ধাপ 3:জাভাস্ক্রিপ্ট

এই কোডটি বর্তমান পৃষ্ঠার URL খুঁজবে এবং তারপর current যোগ করবে সংশ্লিষ্ট মেনু আইটেমের ক্লাস:

const current = 0;
for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].href === document.URL) {
        current = i;
    }
}
document.links[current].className = 'current';