如何修改侧边栏导航active状态anchor锚点的样式（bootstrap scrollspy）

原代码问题分析 #

• 变量未定义：代码中判断条件用的active变量没有提前声明，属于未定义变量，判断逻辑直接失效
• 元素选取时机错误：页面初始化时就查询.active元素，此时Scrollspy还未完成首次计算，大概率拿不到当前激活的锚点元素，就算拿到也是静态的，不会随着滚动更新
• 选择器范围错误：document.querySelector(".nav-link")只会匹配页面第一个导航链接，多个导航项的场景完全不适用
• 语法错误：addEventListener回调函数缺少闭合括号，代码执行直接报错

优先推荐CSS方案（无需JS） #

因为Bootstrap Scrollspy激活锚点时会自动添加.active类，直接写对应选择器的样式即可，性能更高维护更简单：

/* 匹配同时包含三个类的激活锚点，优先级足够覆盖Bootstrap默认样式 */
.nav-link.js-scroll-trigger.active {
  color: #000;
  /* 如有需要可以加其他样式，比如font-weight: bold; */
}

如果遇到样式不生效的情况，要么在属性后加!important强制覆盖，要么在选择器前加侧边栏的父级类名提高优先级，比如.sidebar .nav-link.js-scroll-trigger.active。

若必须用JS实现（含hover区块联动逻辑） #

完整可运行代码如下，同时支持滚动自动更新、hover区块触发锚点样式：

document.addEventListener('DOMContentLoaded', () => {
  // 统一重置导航样式的工具函数
  const resetNavStyle = () => {
    document.querySelectorAll('.nav-link.js-scroll-trigger').forEach(link => {
      link.style.color = '';
    });
  };

  // 1. 监听Scrollspy激活事件，滚动切换锚点时自动更新样式
  document.body.addEventListener('activate.bs.scrollspy', (e) => {
    resetNavStyle();
    // e.relatedTarget就是当前新激活的导航锚点元素
    if (e.relatedTarget) e.relatedTarget.style.color = 'black';
  });

  // 2. 处理experience区块hover联动
  const experienceBlock = document.querySelector('#experience');
  if (experienceBlock) {
    // 找到对应experience区块的导航锚点
    const targetAnchor = document.querySelector('.nav-link.js-scroll-trigger[href="#experience"]');
    if (targetAnchor) {
      // hover进入区块时触发
      experienceBlock.addEventListener('mouseenter', () => {
        resetNavStyle();
        targetAnchor.style.color = 'black';
      });
      // hover离开时恢复当前滚动位置对应的激活锚点样式
      experienceBlock.addEventListener('mouseleave', () => {
        resetNavStyle();
        const currentActive = document.querySelector('.nav-link.js-scroll-trigger.active');
        if (currentActive) currentActive.style.color = 'black';
      });
    }
  }
});

注意事项 #

• 确保Bootstrap Scrollspy已正确初始化：body标签需添加data-bs-spy="scroll" data-bs-target="#你的侧边栏导航ID"属性，或者用JS手动初始化Scrollspy
• 导航锚点的href属性必须和对应区块的ID完全对应，比如锚点写href="#experience"，区块的ID就是experience

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