使用纯 JavaScript 单击元素时添加/删除类

Question

通过 for 循环，我删除了 a 标记内的活动类。但是，当我想添加一个类时，单击什么也没有发生，并且该类被添加到 li 和 a 标签中，但没有活动类名。

这已经问了很多次了，但我仍然无法弄清楚。任何帮助表示赞赏。谢谢！

示例如下：https://jsfiddle.net/fu5e7946/

Answer 1

基本上，您在循环中循环了两次。我已经解决了。 您只需删除之前的活动类并添加新的类，如下所示：

  document.querySelector(".sidenav a.active-list").classList.remove("active-list");
    e.target.classList.add('active-list');

您可以：codepen:link https://codepen.io/emmeiWhite/pen/jOMZRxd

let elements = document.querySelectorAll('div, ul, li, a');

elements.forEach(i => {
  i.addEventListener('click', function(e) {
    document.querySelector(".sidenav a.active-list").classList.remove("active-list");
    e.target.classList.add('active-list');
    
  });
});

.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  overflow-x: hidden;
}

.sidenav ul {
  background-color: black;
  list-style: none;
  padding: 0px;
  padding-right: 0px;
}

.sidenav > ul > li {
  color: white;
  margin: 0px;
}

.sidenav a {
  text-decoration: none;
  font-size: 18px;
  display: block;
  line-height: 4em;
  color: white;
  background-color: black;
}

.sidenav a:hover {
  color: grey;
}

.sidenav .active-list {
  background-color: #e2c9be;
  color: black;
}

   <div id="active-buttons" class="sidenav" style="padding-top: 100px;">
          <ul class="text-center">
            <li>
              <a href="#Profile" class="active-list">Profile</a>
            </li>
            <li>
              <a href="#Experience">Experience</a>
            </li>
            <li>
              <a href="#Projects">Projects</a>
            </li>
            <li>
              <a href="#Skills">Skills</a>
            </li>
          </ul>
        </div>

Answer 2

尝试使用 toggle（更多信息：MDN）。你有工作示例：

let elements = document.querySelectorAll('div, ul, li, a');

elements.forEach(i => {
  i.addEventListener('click', function() {
    i.classList.toggle('active-list');
  });
});

.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  overflow-x: hidden;
}

.sidenav ul {
  background-color: black;
  list-style: none;
  padding: 0px;
  padding-right: 0px;
}

.sidenav > ul > li {
  color: white;
  margin: 0px;
}

.sidenav a {
  text-decoration: none;
  font-size: 18px;
  display: block;
  line-height: 4em;
  color: white;
  background-color: black;
}

.sidenav a:hover {
  color: grey;
}

div ul li a.active-list {
  background-color: #e2c9be;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="active-buttons" class="sidenav" style="padding-top: 100px;">
  <ul class="text-center">
   <li>
    <a href="#Profile" class="active-list">Profile</a>
   </li>
   <li>
    <a href="#Experience">Experience</a>
   </li>
   <li>
    <a href="#Projects">Projects</a>
   </li>
   <li>
    <a href="#Skills">Skills</a>
   </li>
  </ul>
 </div>