使用純 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>