如何在JavaScript中根据URL保持导航栏选中状态？

当然可以，而且这种思路比单纯依赖点击事件+sessionStorage的方案更可靠——它直接和当前页面的URL绑定，不管用户是点击导航栏、直接输入URL、刷新页面还是通过浏览器前进后退跳转，都能正确识别并激活对应导航项。

具体实现步骤： #

1. 编写通用的导航激活函数
   这个函数会读取当前URL路径，自动匹配并激活对应的导航项：

function setActiveNavItem() {
  // 获取当前页面的路径（例如 "/about"、"/home"）
  const currentPath = window.location.pathname;
  
  // 先移除所有导航项的激活状态类
  document.querySelectorAll('.nav-item').forEach(item => {
    item.classList.remove('active');
  });
  
  // 找到与当前路径匹配的导航项，添加激活类
  const targetNavItem = document.querySelector(`.nav-item[href="${currentPath}"]`);
  if (targetNavItem) {
    targetNavItem.classList.add('active');
    // 可选：如果需要保留sessionStorage备份，可以同步存储当前路径
    sessionStorage.setItem('activeNavPath', currentPath);
  }
}

2. 在页面加载及路由变化时触发函数
   确保在所有可能的页面场景下都执行这个函数：

// 页面首次加载/刷新时执行
document.addEventListener('DOMContentLoaded', setActiveNavItem);

// 监听浏览器前进后退事件（处理路由变化）
window.addEventListener('popstate', setActiveNavItem);

// 如果是单页应用（SPA），还要对应监听前端路由的变化事件
// 比如Vue Router的onRouteChange、React Router的useEffect监听location变化

3. 针对特殊场景的优化

• 根路径匹配：如果首页路径是 "/"，确保导航项的href属性值为 "/"，避免匹配错误
• 带参数的URL：如果URL包含查询参数（如 "/product?id=123"），window.location.pathname会自动忽略参数部分，只取路径，保证匹配准确性
• 子路径兼容：如果导航项对应父路径（比如 "/blog" 对应 "/blog/post/1"），可以修改匹配逻辑为路径前缀匹配：

// 替换原有的targetNavItem查找逻辑
const targetNavItem = Array.from(document.querySelectorAll('.nav-item')).find(item => {
  const itemHref = item.getAttribute('href');
  return currentPath.startsWith(itemHref);
});

为什么这个方案更好？ #

它彻底摆脱了对点击事件的依赖，直接以当前页面的实际URL为判断依据，从根源上解决了"直接输入URL时状态不生效"的问题，同时也兼容了sessionStorage的备份需求（如果需要的话）。

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