আপনার ওয়েবসাইটের নেভিগেশন বার/মেনুতে বর্তমান এক্টিভ পেজ কীভাবে হাইলাইট করবেন তা শিখুন।
একটি সাধারণ ওয়েবসাইট ফিচার হলো ইউজার পেজ থেকে পেজে নেভিগেট করলে কারেন্ট পেজ মেনু আইটেম হাইলাইট করা।
ভ্যানিলা JavaScript দিয়ে এটা করার পদ্ধতি নিচে দেওয়া হলো।
স্টেপ ১: একটি সিম্পল মেনু
<nav class="navbar"> <a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a> </nav>স্টেপ ২: CSS স্টাইলিং
ন্যূনতম CSS স্টাইলিং। এখানে গুরুত্বপূর্ণ অংশ হলো .current ক্লাস, যা আমরা স্টেপ ৩-এ কারেন্ট এক্টিভ পেজ আইটেমে যোগ করব:
.navbar { background-color: #111; padding: 1rem; } .navbar a { text-decoration: none; color: white; padding: 1rem; } .current { color: #df3e23; }স্টেপ ৩: JavaScript
এই কোডটি কারেন্ট পেজ 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';