如何实现点击导航菜单项后标记为active激活高亮状态

你现有代码只写了hover态样式，要实现点击后保持高亮，按下面的步骤实现即可，我会分场景给出最优实现方式，你可以对照自己的方案判断合理性。

第一步：先补充激活态的CSS样式 #

在你现有CSS代码里追加active类的样式即可，颜色可以根据你的设计需求调整：

/* 激活态菜单项样式 */
.topnav_menu a.active {
    background-color: #04AA6D;
    color: #ffffff;
}

第二步：根据业务场景选JS实现逻辑 #

场景1：单页应用/锚点跳转（无页面刷新） #

这是最轻量的实现方式，不要用localStorage存储点击状态这类冗余方案，直接通过点击事件切换类名即可：

const navItems = document.querySelectorAll('.topnav_menu a');
navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 先清除所有项的激活态
    navItems.forEach(i => i.classList.remove('active'));
    // 给当前点击项加激活态
    item.classList.add('active');
  })
})

场景2：多页跳转/页面会刷新 #

上面的点击切换方案在页面刷新后会失效，最优方案是页面加载时根据当前URL自动匹配对应菜单项加激活态，不要在每个页面单独给导航写死active类，后期维护成本极高：

document.addEventListener('DOMContentLoaded', () => {
  const currentPath = window.location.pathname;
  const navItems = document.querySelectorAll('.topnav_menu a');
  navItems.forEach(item => {
    const itemHref = item.getAttribute('href');
    // 匹配路径，首页单独做判断避免误匹配
    if (currentPath.endsWith(itemHref) || (itemHref === 'index.html' && currentPath === '/')) {
      item.classList.add('active');
    }
  })
})

避坑说明 #

• 不推荐用CSS :target 伪类实现，该伪类依赖URL哈希匹配，页面内其他锚点滚动逻辑会和高亮状态冲突，多页场景完全无法使用
• 单页场景不要额外引入路由库做高亮切换，原生JS少量代码就能实现，没有额外依赖
• 如果后续要加下拉菜单项，只需要给下拉触发器的父元素加active类判断逻辑即可，核心逻辑不变

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup