纯JavaScript：切换链接处于活动状态

Question

我的代码仅适用于第一个“ a”孩子。 不在其余的“一个”孩子上工作。 为什么？

互联网上有一些解决方案，但在jQuery中。 我更喜欢纯JavaScript。

 document.querySelector('a').addEventListener('click', active); function active() { document.querySelector('a').classList.remove('active'); this.classList.add('active'); } 

 .topnav { overflow: hidden; background-color: grey; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: red; color: white; } 

 <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> 

Answer 1

添加ID而不是类； 删除每次单击的“活动”类，然后将“活动”类添加到单击的锚标记中；

 document.getElementById('news').onclick = active; document.getElementById('home').onclick = active; document.getElementById('contact').onclick = active; document.getElementById('about').onclick = active; //addEventListener('click', active); function active() { document.querySelector('a.active').classList.remove('active'); this.classList.add('active'); } 

 .topnav { overflow: hidden; background-color: grey; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: red; color: white; } 

 <div class="topnav"> <a class="active" id="home" href="#home">Home</a> <a href="#news" id="news">News</a> <a href="#contact" id="contact">Contact</a> <a href="#about" id="about">About</a> </div> 

Answer 2

您可以将事件委托与querySelectorAll使用，以编写小巧的解决方案，如下所示：

 document.querySelector('.topnav').addEventListener('click', active); function active(e) { document.querySelectorAll('.topnav > a').forEach(function(a){ a.classList.remove('active'); }) e.target.classList.add('active'); } 

  .topnav { overflow: hidden; background-color: grey; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 10px; text-decoration: none; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: red; color: white; } 

 <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> 

Answer 3

您需要querySelectorAll和一些循环：

const menuItems = document.querySelectorAll('a');

menuItems.forEach(el =>
  el.addEventListener('click', active)
);

function active() {
  menuItems.forEach(el =>
    el.classList.remove('active')
  );
  this.classList.add('active');
}

Answer 4

您应该使用document.querySelectorAll('a')