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

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

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

document.querySelector（'a'）。addEventListener（'click'，active）；
函数活动（）{
document.querySelector（'a'）.classList.remove（'active'）；
this.classList.add（'active'）；
}

.topnav{
溢出：隐藏；
背景颜色：灰色；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：10px；
文字装饰：无；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：红色；
颜色：白色；
}

您需要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');
}

---

您应该使用

document.querySelectorAll（'a'）

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

document.getElementById（'news'）.onclick=active；
document.getElementById（'home'）。onclick=active；
document.getElementById（'contact'）。onclick=active；
document.getElementById（'about'）。onclick=active；
//addEventListener（“单击”，激活）；
函数活动（）{
document.querySelector（'a.active'）.classList.remove（'active'）；
this.classList.add（'active'）；
}

.topnav{
溢出：隐藏；
背景颜色：灰色；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：10px；
文字装饰：无；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：红色；
颜色：白色；
}

---

您可以将事件委派与

querySelectorAll

一起使用，编写小而简洁的解决方案，如下所示：

document.querySelector（'.topnav'）.addEventListener（'click'，active）；
功能激活（e）{
document.querySelectorAll（'.topnav>a'）.forEach（函数（a）{
a、 classList.remove（'active'）；
})
e、 target.classList.add（'active'）；
}

.topnav{
溢出：隐藏；
背景颜色：灰色；
}
.topnav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：10px；
文字装饰：无；
}
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
.topnav a.active{
背景色：红色；
颜色：白色；
}

---

不相关，但。。“我更喜欢纯JavaScript”，为什么？因为

document.querySelector（'a'）

只返回找到的第一个元素