如何修改导航栏多个项的class并实现页面滚动时自动更新状态？

一、修复点击导航项时的active类错误 #

你遇到的点击后所有项都变为active的问题，核心原因是未先清除所有导航项的active类，仅给当前点击项添加类，导致旧的active类未被移除。正确逻辑是：点击时先批量移除所有导航项的active类，再给当前项添加该类。

代码示例（原生JS） #

假设你的导航项统一使用类名.nav-item，激活类为active：

const navItems = document.querySelectorAll('.nav-item');

navItems.forEach(item => {
  item.addEventListener('click', function() {
    // 移除所有导航项的active类
    navItems.forEach(nav => nav.classList.remove('active'));
    // 给当前点击项添加active类
    this.classList.add('active');
  });
});

二、实现滚动时自动高亮对应导航项 #

要实现滚动到对应区域时自动激活导航项，需要监听页面滚动事件，判断当前视图所在的内容区域，再给对应导航项添加active类。

步骤与代码示例 #

1. 关联导航项与内容区域：给每个内容区域设置唯一id，给对应导航项添加data-target属性绑定区域id：

<!-- 导航栏结构 -->
<div class="nav-bar">
  <div class="nav-item active" data-target="#vote-section">投票区</div>
  <div class="nav-item" data-target="#sponsor-section">赞助区</div>
</div>

<!-- 内容区域结构 -->
<section id="vote-section">投票区内容...</section>
<section id="sponsor-section">赞助区内容...</section>

2. 编写滚动监听逻辑（带节流优化）：

const sections = document.querySelectorAll('section[id]');
const navItems = document.querySelectorAll('.nav-item');

function highlightActiveNav() {
  const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

  sections.forEach(section => {
    const sectionTop = section.offsetTop - 100; // 偏移100px，提前触发高亮
    const sectionHeight = section.offsetHeight;
    const sectionId = section.getAttribute('id');

    // 判断当前滚动位置是否落在目标区域内
    if (scrollPosition > sectionTop && scrollPosition <= sectionTop + sectionHeight) {
      // 清除所有导航项的active类
      navItems.forEach(item => item.classList.remove('active'));
      // 给对应导航项添加active类
      document.querySelector(`.nav-item[data-target="#${sectionId}"]`).classList.add('active');
    }
  });
}

// 节流优化：避免滚动时频繁触发函数
let throttleTimer;
window.addEventListener('scroll', () => {
  if (!throttleTimer) {
    throttleTimer = setTimeout(() => {
      highlightActiveNav();
      throttleTimer = null;
    }, 100);
  }
});

// 页面加载时执行一次，确保初始位置的导航高亮正确
window.addEventListener('load', highlightActiveNav);

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