How can I target specific elements to toggle the active class using Javascript?

Question

How can I target specific elements to toggle the active class using Javascript?

At the moment, I have a function that highlights my navbar menu items based on which one I clicked.

However, the issue arises when there is a button inside my navbar receiving the highlight class upon clicking.

I'm unsure of how to modify the JavaScript to ensure that the button does not obtain the highlight class when clicked.

Below is the current JS implementation:

      const menu = document.querySelector('#mobile-menu');
      const menuLinks = document.querySelectorAll('.navbar__menu');

      const activeMenu = e => {
        const elems = document.querySelector('.highlight');
        const button = document.querySelector('.button');

        if (elems) {
          elems.classList.remove('highlight');
        }

        if(!button.contains(e.target)) {
          e.target.className = 'navbar__links highlight';
        }
      };

      menuLinks.forEach(link => {
          link.addEventListener('click', activeMenu);
      });

Here is the HTML code for the Navbar:

    <ul class="navbar__menu">
      <li class="navbar__item">
        <a href="#home" class="navbar__links" id="homePage">Home</a>
      </li>
      <li class="navbar__item">
        <a href="#about" class="navbar__links" id="about-us">About 
     Us</a>
      </li>
      <li class="navbar__item">
        <a href="#services" class="navbar__links" 
    id="service">Services</a>
      </li>
      <li class="navbar__btn">
        <a href="#sign-up" class=" button" id="signup">Sign Up</a>
      </li>
    </ul>

javascript html css

Answer 1

Answer №1

Check out this fully functional code that addresses all your concerns. By clicking on the logo, it will apply a highlight class to the homepage only if the window width is greater than 768 pixels - ensuring that the class is added to the homepage exclusively.

//logo event listener
logo.addEventListener('click', function() {
  if (window.innerWidth > 768) {
    const homeMenu = document.querySelector('#homePage');
    homeMenu.classList.add('highlight');
  }
});

In addition, to prevent the highlight class from being added to the signup button, you can validate whether the clicked list item's id is not 'signup' using the getAttribute() method.

// adds 'highlight' class to my menu item here - except the button
if (window.innerWidth > 768) {
  if (e.target.getAttribute('id') != 'signup') {
    e.target.classList.add('highlight');
  }
}

Take a look at the complete working demonstration:

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
const logo = document.querySelector('#navbar__logo');

const activeMenu = e => {
  const elem = document.querySelector('.highlight');

  // adds 'highlight' class to my menu item here
  if (window.innerWidth > 768) {
    if (e.target.getAttribute('id') != 'signup') {
      e.target.classList.add('highlight');
    }
  }

  //Remove class from others when click on li
  if (elem && window.innerWidth < 768 || elem) {
    elem.classList.remove('highlight');
  }
};

//Click event on li
menuLinks.addEventListener('click', activeMenu);

//logo event listener
logo.addEventListener('click', function() {
  if (window.innerWidth > 768) {
    const homeMenu = document.querySelector('#homePage');
    homeMenu.classList.add('highlight');
  }
});


//on resize
window.addEventListener('resize', function(event) {
  const links = document.querySelectorAll('.navbar__links');
  links.forEach(function(x) {
    if (window.innerWidth < 768) {
      x.classList.remove('highlight'); //remove highlught class
    }
  })
});

.highlight {
  background: red;
}

<a href="#home" id="navbar__logo">COLOR</a>
<div class="navbar__toggle" id="mobile-menu">
  <span class="bar"></span> <span class="bar"></span>
  <span class="bar"></span>
</div>

<ul class="navbar__menu">
  <li class="navbar__item">
    <a href="#home" class="navbar__links" id="homePage">Home</a>
  </li>
  <li class="navbar__item">
    <a href="#about" class="navbar__links" id="about-us">About
      Us</a>
  </li>
  <li class="navbar__item">
    <a href="#services" class="navbar__links" id="service">Services</a>
  </li>
  <li class="navbar__btn">
    <a href="#sign-up" class="button" id="signup">Sign Up</a>
  </li>
</ul>

Answer 2

Check out this fully functional code that addresses all your concerns. By clicking on the logo, it will apply a highlight class to the homepage only if the window width is greater than 768 pixels - ensuring that the class is added to the homepage exclusively.

//logo event listener
logo.addEventListener('click', function() {
  if (window.innerWidth > 768) {
    const homeMenu = document.querySelector('#homePage');
    homeMenu.classList.add('highlight');
  }
});

In addition, to prevent the highlight class from being added to the signup button, you can validate whether the clicked list item's id is not 'signup' using the getAttribute() method.

// adds 'highlight' class to my menu item here - except the button
if (window.innerWidth > 768) {
  if (e.target.getAttribute('id') != 'signup') {
    e.target.classList.add('highlight');
  }
}

Take a look at the complete working demonstration:

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
const logo = document.querySelector('#navbar__logo');

const activeMenu = e => {
  const elem = document.querySelector('.highlight');

  // adds 'highlight' class to my menu item here
  if (window.innerWidth > 768) {
    if (e.target.getAttribute('id') != 'signup') {
      e.target.classList.add('highlight');
    }
  }

  //Remove class from others when click on li
  if (elem && window.innerWidth < 768 || elem) {
    elem.classList.remove('highlight');
  }
};

//Click event on li
menuLinks.addEventListener('click', activeMenu);

//logo event listener
logo.addEventListener('click', function() {
  if (window.innerWidth > 768) {
    const homeMenu = document.querySelector('#homePage');
    homeMenu.classList.add('highlight');
  }
});


//on resize
window.addEventListener('resize', function(event) {
  const links = document.querySelectorAll('.navbar__links');
  links.forEach(function(x) {
    if (window.innerWidth < 768) {
      x.classList.remove('highlight'); //remove highlught class
    }
  })
});

.highlight {
  background: red;
}

<a href="#home" id="navbar__logo">COLOR</a>
<div class="navbar__toggle" id="mobile-menu">
  <span class="bar"></span> <span class="bar"></span>
  <span class="bar"></span>
</div>

<ul class="navbar__menu">
  <li class="navbar__item">
    <a href="#home" class="navbar__links" id="homePage">Home</a>
  </li>
  <li class="navbar__item">
    <a href="#about" class="navbar__links" id="about-us">About
      Us</a>
  </li>
  <li class="navbar__item">
    <a href="#services" class="navbar__links" id="service">Services</a>
  </li>
  <li class="navbar__btn">
    <a href="#sign-up" class="button" id="signup">Sign Up</a>
  </li>
</ul>

Answer 3

Answer №2

Instead of registering a click event on every item in the menu, it is better to register the event on the

<ul class="navbar__menu">

element and use the event's target property to determine which item was clicked.

If you want to remove the highlight class from the previously selected item, you can do so by using

document.querySelector('.highlight').classList.remove('highlight');

, followed by adding the class to the newly selected item.

Here is an example code snippet for this:

menuLinks.addEventListener('click', evt => {
  // Remove highlight class from previous selection
  document.querySelector('.highlight').classList.remove('highlight');

  // Add highlight class to current selection
  evt.target.classList.add('highlight');
});

Answer 4

Instead of registering a click event on every item in the menu, it is better to register the event on the

<ul class="navbar__menu">

element and use the event's target property to determine which item was clicked.

If you want to remove the highlight class from the previously selected item, you can do so by using

document.querySelector('.highlight').classList.remove('highlight');

, followed by adding the class to the newly selected item.

Here is an example code snippet for this:

menuLinks.addEventListener('click', evt => {
  // Remove highlight class from previous selection
  document.querySelector('.highlight').classList.remove('highlight');

  // Add highlight class to current selection
  evt.target.classList.add('highlight');
});

How can I target specific elements to toggle the active class using Javascript?

Answer №1

Answer №2

Similar questions

Is there a way to duplicate a GLTF model that has been imported into the Autodesk Viewer?

Preserve the item from the predetermined model

Can we prevent a component from being mounted every time it is rendered by its parent component?

Combining values with identical keys in a PHP MySQL D3 data set

Incorporating angularjs within a page loaded with jquery.load

CSS: Problem Arising from Line Connections Between Tree Elements

Incorporating a new dropdown menu above the content of a pre-existing jQuery accordion dropdown, causing the content to shift downwards

Differences in behavior of Backbone.js Ajax calls between Chrome and Firefox

Steps for importing an external .js file into a Vue 2 component

Tips for changing the selected value in a drop-down menu

"Any tips on maintaining the blue color of my dropdown link when it is selected as active

The AJAX request is not triggered before the postback when using a LinkButton in ASP

What is the quickest way to find and add together the two smallest numbers from a given array of numbers using JavaScript?

Can someone provide a description for a field within typedoc documentation?

Issue with Hover behavior not being implemented on Android Webview

Methods for displaying a placeholder in a semantic-ui-vue dropdown without using the multiple attribute

How can you securely transfer the ARRAY OBJECT from JavaScript to PHP using Ajax?

Tips for fixing the AnguarJS $injector:modulerr problem (more information provided)

The function from a different .js file cannot be located in NodeJS

Embed SQL parameter into HTML code