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

Question

使用 for 循环，我删除了a标签内的活动 class 。 但是，当我想添加 class 时，单击什么也没发生，并且 class 被添加到li和标签中，但没有活动a class 名称。

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

这是示例： https://jsfiddle.net/fu5e7946/

Answer 1

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

  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>