Question 339259 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Add class on click to a unordered list item to change the background color of list item and at the same time remove it from other list item

I am trying to add a class on the unordered list item when I click on it and a the same time it should be removing the same class from other list item.

I have tried using the below JavaScript logic but I am not getting the desired results. When I am including e.preventDefault() then it is not redirecting me to the desired page but it is removing and adding the class to the list item. And when I am excluding e.preventDefault() then it is redirecting me to the desired page but it is not removing and adding the class.

var links = document.querySelectorAll('li');
links.forEach(function(element) {
  element.addEventListener('click', function(e) {
    // PreventDefault to prevent redirect
    e.preventDefault();
    links.forEach(async function(element) {
      // element.preventDefault()
      await element.classList.remove('active');
    });
    this.classList.add('active');
  });
});
li:hover:not(.active) {
  background-color: rgb(91, 19, 114);
  border-radius: 2vh;
}

.active {
  background-color: rgb(132, 2, 175);
}
<div id="user-account-menu">
  <ul class="side-nav">
    <li class="">
      <a href="/me">
        Settings
        <img class="navItems-icons" src="img/icons/settings.png" alt="settings">
      </a>
    </li>
    <li class="active">
      <a href="/create-user">
        Create User
        <img class="navItems-icons" src="img/icons/create-user.png" alt="create-user">
      </a>
    </li>
  </ul>
</div>
Tags:

2

Answers


  1. 0

    Please remove async/await from internal forEach. Without async/await it will run synchronously before propagated default behaviour (redirecting) takes action.

    I tried it that way, and it works, it removes ‘active’ class from other list item before redirecting (I can see it for a little moment before redirection occurs):

    var links = document.querySelectorAll('li');
links.forEach(function(element) {
  element.addEventListener('click', function(e) {
    links.forEach(function(element) {
      element.classList.remove('active');
    });
    this.classList.add('active');
  });
});
    li:hover:not(.active) {
  background-color: rgb(91, 19, 114);
  border-radius: 2vh;
}

.active {
  background-color: rgb(132, 2, 175);
}
    <div id="user-account-menu">
  <ul class="side-nav">
    <li class="">
      <a href="/me">
        Settings
        <img class="navItems-icons" src="img/icons/settings.png" alt="settings">
      </a>
    </li>
    <li class="active">
      <a href="/create-user">
        Create User
        <img class="navItems-icons" src="img/icons/create-user.png" alt="create-user">
      </a>
    </li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    you could just add a control for not self remove the class
    check if this can help you in some way:

    var links = document.querySelectorAll('li');
links.forEach(function(element) {
  element.addEventListener('click', function(e) {
    // PreventDefault to prevent redirect
    e.preventDefault();
    links.forEach(async function(element) {
      // element.preventDefault()
      //just add a control for not self  remove the class
      if(e.target.closest("li").isEqualNode(element)==false){
        await element.classList.remove('active');
      }
    });
    this.classList.add('active');

  });
});
    li:hover:not(.active) {
  background-color: rgb(91, 19, 114);
  border-radius: 2vh;
}

.active {
  background-color: rgb(132, 2, 175);
}
    <div id="user-account-menu">
  <ul class="side-nav">
    <li class="">
      <a href="/me">
        Settings
        <img class="navItems-icons" src="img/icons/settings.png" alt="settings">
      </a>
    </li>
    <li class="active">
      <a href="/create-user">
        Create User
        <img class="navItems-icons" src="img/icons/create-user.png" alt="create-user">
      </a>
    </li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search