javascript - 纯 JavaScript : toggle links active

Question

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

Internet 上有一些解决方案，但在 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而不是class；删除每次点击时的“事件”类，然后将“事件”类添加到点击的 anchor 标记；

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>