为无序列表项添加单击类，以更改列表项的背景颜色，同时将其从其他列表项中删除

Question

当我单击无序列表项时，我试图在无序列表项上添加一个类，同时它应该从其他列表项中删除相同的类。

我尝试使用下面的 JavaScript 逻辑，但没有得到所需的结果。当我包含

e.preventDefault()

时，它不会将我重定向到所需的页面，而是删除该类并将其添加到列表项中。当我排除

e.preventDefault()

时，它会将我重定向到所需的页面，但不会删除和添加该类。

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>

Answer 1

请从内部 forEach 中删除 async/await。如果没有 async/await，它将在传播的默认行为（重定向）采取行动之前同步运行。

我尝试了这种方式，它起作用了，它在重定向之前从其他列表项中删除了“活动”类（在重定向发生之前我可以看到它一会儿）：

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>