在向li添加新类之前删除类

Question

我正在构建一个具有当前类的菜单栏，当用户单击时会突出显示这个类。

我怎么做，当有人点击李，它从以前的李删除，并将它放在新的李点击？

这是我的密码

li.forEach(li => {
  li.addEventListener('click', () => {
      li.classList.add("selected");
      li.style.background = '';
      li.style.paddingTop = '';
  });
});

Answer 1

你可以做这样的事

li.forEach(li => {
  li.addEventListener('click', () => {
      removeClass();
      li.classList.add("selected");
      li.style.background = '';
      li.style.paddingTop = '';
  });
});

function removeClass () {
  li.forEach(li => {
    li.classList.remove("selected");
  })
}

Answer 2

这个怎么样？

items.forEach(li => {
  li.addEventListener('click', () => {
      items.forEach(li => li.classList.remove("selected"));
      li.classList.add("selected");
      li.style.background = '';
      li.style.paddingTop = '';
  });
});

Answer 3

一种简单的方法是：

li.forEach(li => {
  li.addEventListener('click', () => {

      // find the parent-node of the current <li> element:
      li.parentNode

        // use Element.querySelector() to find the current
        // <li> element with the 'selected' class:
        .querySelector('li.selected')

        // use classList.remove() to remove that class-name:
        .classList.remove('selected');

      // as before:
      li.classList.add("selected");

      // why is the following necessary? It *seems* to be
      // undoing something that shouldn't be necessary:
      li.style.background = '';
      li.style.paddingTop = '';
  });
});

参考文献：

• Element.classList。
• Element.querySelector()。