How To Add Active Class To a Current Navbar Element?-CodePudding

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 >
    <a href="#">
      <h3> AMANI DEV </h3>
    </a>
    <ul>
      <li><a 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>

CodePudding user response：

Typo with ink not link.
When you assign a class with classList you don't include the .: classList.add('active').
In your CSS background should probably be background-color.
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 >
    <a href="#">
      <h3> AMANI DEV </h3>
    </a>
    <ul>
      <li><a  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>

CodePudding user response：

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

CodePudding user response：

Modify the code in the following line :

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

 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");
  });
});

CodePudding user response：


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 >
    <a href="#">
      <h3> AMANI DEV </h3>
    </a>
    <ul id="myNav">
      <li><a  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>

CodePudding user response：

// 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')
  })
})