वेनिला JavaScript से वर्तमान पेज मेनू आइटम को हाइलाइट करें

अपनी वेबसाइट के नेविगेशन बार/मेनू में वर्तमान में एक्टिव पेज को हाइलाइट करना सीखें।

एक आम वेबसाइट फीचर है जब यूजर पेज से पेज पर नेविगेट करता है तो वर्तमान पेज मेनू आइटम को हाइलाइट करना।

यहां वेनिला JavaScript से ऐसा करने का तरीका बताया गया है।

चरण 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: 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';