如何为两个锚标签添加active类？附相关代码片段

首先得指出你现有JavaScript代码里的问题：document.querySelector(".sidebar") 返回的是单个DOM元素（页面中第一个匹配.sidebar类的元素），它并没有length属性，所以你写的for (var i = 0; i <= sidebar.length; ...)循环根本不会执行——因为sidebar.length是undefined，转换成数字后是NaN，循环条件不成立。

下面给你几种可行的实现方式：

方式1：直接选中所有目标锚标签并批量添加类 #

这是最简洁的写法，直接通过选择器获取.sidebar下的所有<a>标签，然后遍历添加active类：

// 获取sidebar下的所有a标签
const sidebarLinks = document.querySelectorAll(".sidebar a");
// 遍历每个标签，添加active类
sidebarLinks.forEach(link => link.classList.add("active"));

方式2：先选中Sidebar，再获取内部的锚标签 #

如果你想保留先选sidebar的逻辑，可以这样写：

const sidebar = document.querySelector(".sidebar");
// 从sidebar里获取所有a标签
const links = sidebar.querySelectorAll("a");

// 用for循环遍历添加类（兼容旧浏览器的写法）
for (let i = 0; i < links.length; i++) {
  links[i].classList.add("active");
}

// 或者用forEach更简洁（现代浏览器支持）
links.forEach(link => link.classList.add("active"));

扩展：点击时切换Active类（常见需求） #

如果你的需求是点击哪个锚标签，就给它添加active类，并移除其他标签的active类，可以绑定点击事件来实现：

const sidebarLinks = document.querySelectorAll(".sidebar a");

sidebarLinks.forEach(link => {
  link.addEventListener("click", function(e) {
    // 阻止默认跳转行为（如果不需要跳转页面的话）
    e.preventDefault();
    
    // 先移除所有标签的active类
    sidebarLinks.forEach(item => item.classList.remove("active"));
    
    // 给当前点击的标签添加active类
    this.classList.add("active");
  });
});

内容的提问来源于stack exchange，提问作者Momin