How To Add Active Class To a Current Navbar Element?

Question

hope you all doing great. I've been trying to add the (active class )to each of the navbar links when the user is on that specific section of the page with this Tutorial (i'm stuck at 2:45:05) and no success so far can anyone tell me what i did wrong.thank you.

 const menu = document.querySelector(' nav.container ul'); const navItems = menu.querySelectorAll('li'); navItems.forEach(item => { const link = item.querySelector('a'); ink.addEventListener('click', () => { link.classList.add(".active"); }); });

 nav.container ul li a.active { background: var(--color-primary); color: var(--color-white); }

 <nav> <div class="container"> <a href="#"> <h3> AMANI DEV </h3> </a> <ul> <li><a href="#home" class="active">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#services">Services</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#contact">Contact Me</a> </li> </ul> </div> </nav>

Answer 1

1. Typo with ink not link .
2. When you assign a class with classList you don't include the . : classList.add('active') .
3. In your CSS background should probably be background-color .
4. If you want to remove the other active links before applying the new one you can use forEach to iterate over the links and use classList.remove('active') on each one.

You may find event delegation easier to manage. Rather than attaching multiple listeners to multiple elements attach one listener to the list element that watches out for events from its child elements as they "bubble up the DOM. You can then check that the clicked element is a link , remove the active classes from the previous link(s), and then apply the active class to the clicked link .

Here's an example using event delegation.

 // Cache the list, and the items const list = document.querySelector(' nav.container ul'); const links = list.querySelectorAll('a'); // Add one listener to the list element list.addEventListener('click', handleClick); // If the clicked element is a link remove all // the active classes from the other links, and then // add the active class to the link that was clicked on function handleClick(e) { if (e.target.matches('a')) { links.forEach(link => link.classList.remove('active')); e.target.classList.add('active'); } }

 :root { --color-white: white; --color-primary: red; }.active { background-color: var(--color-primary); color: var(--color-white); }

 <nav> <div class="container"> <a href="#"> <h3> AMANI DEV </h3> </a> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#services">Services</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#contact">Contact Me</a> </li> </ul> </div> </nav>

Answer 2

You need to do querySelectorAll in a tag not on the li tag. Just do this and do let me know.

Answer 3

document.querySelectorAll('ul li').forEach(el => {
  el.onclick = () => {
    document.querySelectorAll('ul li').forEach(el => el.classList.remove('active'));
    el.classList.add('active');
  }
})

here a demo code:

 document.querySelectorAll('#myNav li').forEach(el => { el.onclick = () => { document.querySelectorAll('#myNav li').forEach(el => el.classList.remove('active')); el.classList.add('active'); } })

 .active { font-size: 70px; }

 <nav> <div class="container"> <a href="#"> <h3> AMANI DEV </h3> </a> <ul id="myNav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#services">Services</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#contact">Contact Me</a> </li> </ul> </div> </nav>

Answer 4

Modify the code in the following line:

 ink.addEventListener('click',() => {

to

 link.addEventListener('click',() => {

to be like this

const menu = document.querySelector(' nav .container ul');

const navItems = menu.querySelectorAll('li');
navItems.forEach(item => {
  const link = item.querySelector('a');
  link.addEventListener('click',() => {
    link.classList.add(".active");
  });
}); 

Answer 5

 // selecting all a element on the page const links = document.querySelectorAll('a'); // adding a click event on all elements links.forEach((link) => { link.addEventListener('click', (e) => { // if we click first thing is deleting the active class from all link links.forEach((link) => { link.classList.remove('active') }) // then in the end add the active class only in the correct one e.target.classList.add('active') }) })