如何为当前导航栏元素添加active类？代码问题求助

你的代码里存在几个明显错误，还有逻辑上的偏差，导致功能无法实现：

错误点梳理 #

• 变量拼写错误：代码里的ink.addEventListener是笔误，应该是link.addEventListener，这个错误会直接导致控制台报错，点击事件根本无法触发。
• 类名添加错误：classList.add(".active")里多了.，classList.add()只需要传入类名本身，不需要加选择器的.，你现在添加的是一个叫.active的类（带点的类名），和CSS里定义的.active类不匹配。
• 逻辑偏差：你当前只实现了点击导航链接时添加active类的逻辑，但你的需求是用户处于页面对应区域时自动激活导航链接，这需要监听页面滚动事件，根据页面滚动位置判断哪个区域在视口内，再激活对应的导航链接。

修正后的完整代码 #

JavaScript（包含点击切换+滚动监听） #

// 获取所有导航链接
const navLinks = document.querySelectorAll('nav .container ul li a');

// 点击导航链接时切换active类
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 先移除所有链接的active类
    navLinks.forEach(item => item.classList.remove('active'));
    // 给当前点击的链接添加active类
    link.classList.add('active');
  });
});

// 监听页面滚动，自动激活对应区域的导航链接
window.addEventListener('scroll', () => {
  // 滚动位置加100是为了提前触发激活效果，可根据需求调整
  const scrollPos = window.scrollY + 100;

  // 遍历页面中所有带id的section（需确保页面有对应id的区域）
  document.querySelectorAll('section[id]').forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.offsetHeight;
    const sectionId = section.getAttribute('id');

    // 判断当前滚动位置是否处于该section范围内
    if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
      // 移除所有链接的active类
      navLinks.forEach(link => link.classList.remove('active'));
      // 激活对应id的导航链接
      document.querySelector(`nav .container ul li a[href="#${sectionId}"]`).classList.add('active');
    }
  });
});

CSS（保持你的原有代码即可） #

nav .container ul li a.active {
  background: var(--color-primary);
  color: var(--color-white);
}

HTML（注意页面需补充对应id的section） #

你的导航链接href已经对应了#home、#about等id，需要在页面中添加对应的section元素，比如：

<section id="home">
  <!-- 首页内容 -->
</section>
<section id="about">
  <!-- 关于页内容 -->
</section>
<section id="skills">
  <!-- 技能页内容 -->
</section>
<!-- 其他section同理 -->

注意事项 #

• 确保页面中的每个区域都有和导航href对应的id，否则滚动监听无法找到对应区域。
• scrollY + 100的数值可以根据你的页面布局调整，目的是让激活时机更符合视觉体验。

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