[SOLVED] Dynamically adding highlight background on active navigation link in Webpage.

Question

I want to add a highlight to a corresponding link in a navigation menu when the related page is open. And I tried the following code and it is working perfectly, but It seems lengthy.
How can I do this in a easier, shorter and smarter way
Code:
let navLinks = document.querySelectorAll(".header .menu ul li");

/*navLinks structure:
Home => /index.html or site name only
About => /about.html
Contact => /contact.html
Signup => /join.html
....................*/

let linkPath = window.location.href;

if(/localhost:8158$/.test(linkPath) || /localhost:8158\/index/.test(linkPath)) {
navLinks[0].classList.add("active");
}

if(/localhost:8158\/about/.test(linkPath)) {
navLinks[1].classList.add("active");
}

if(/localhost:8158\/contact/.test(linkPath)) {
navLinks[2].classList.add("active");
}

Answer 1

right... edit

el.parentNode.classList.add('active')

Answer 2

if you insert an anchor tag inside li elements you can do something like

let ps= document.querySelectorAll('.header .menu ul li a')
ps= Array.from(ps)
ps.forEach((el)=>{
if(el.href==window.location.href){
el.classList.add('active')
}
})

Answer 3

KrOW yes, there is anchor tag inside li tag, but selecting the <a> tag highlight only the text, so I am selecting the parent of <a> i.e. li to get expected result.

Answer 4

KrOW thank you.🙂

Answer 5

👍🏻