वेनिला जावास्क्रिप्ट के साथ वर्तमान पृष्ठ मेनू आइटम को हाइलाइट कैसे करें

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

जब उपयोगकर्ता एक पृष्ठ से दूसरे पृष्ठ पर जाता है, तो वर्तमान पृष्ठ मेनू आइटम को हाइलाइट करना एक सामान्य वेबसाइट सुविधा है।

यहां बताया गया है कि वेनिला जावास्क्रिप्ट के साथ ऐसा कैसे करें।

चरण 1:एक साधारण मेनू

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

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