jQuery点击a标签跳转href时同步修改菜单active类失效问题求解

问题根源 #

你的逻辑存在本质错误：点击a标签时修改的是当前页面的DOM类名，紧接着页面跳转刷新后，所有临时修改的DOM状态都会被重置，新页面加载后仍然会使用服务端返回的默认HTML结构的类名，所以看起来激活状态没有生效。

你现有代码的逻辑错误还包括：

• e.preventDefault()写在window.location.href赋值之后，页面已经触发跳转，这行代码根本不会执行
• 错误代码$('.navigation-icon-menu ul li').addClass('active');会给所有左侧图标菜单项加激活类，不符合业务预期

解决方案 #

根据你的站点类型选择对应方案：

方案1：多页面刷新跳转场景（绝大多数普通站点适用） #

不需要绑定点击事件修改激活状态，改为在每个页面加载完成后，自动匹配当前页面URL，给对应菜单项添加激活类即可。
删除你现有的点击事件代码，替换为以下初始化代码：

$(document).ready(function() {
  // 获取当前页面访问路径
  const currentPath = window.location.pathname;
  // 遍历所有菜单链接
  $('.navigation-menu-body ul li a').each(function() {
    const linkHref = $(this).attr('href');
    // 匹配当前页面对应的菜单链接
    if (currentPath === linkHref || window.location.href.includes(linkHref)) {
      // 给当前链接加激活类
      $(this).addClass('active');
      // 给所属菜单组加展开类
      const parentMenu = $(this).closest('ul');
      parentMenu.addClass('navigation-active');
      // 匹配左侧图标菜单的激活状态
      const targetIconHref = '#' + parentMenu.attr('id');
      $('.navigation-icon-menu ul li a').each(function() {
        if ($(this).attr('href') === targetIconHref) {
          $(this).parent().addClass('active');
        }
      });
      // 匹配到后终止遍历
      return false;
    }
  });
});

这个方案下a标签可以正常跳转，新页面加载后会自动识别当前路径并设置对应的激活状态，不需要额外处理点击逻辑。

方案2：单页无刷新场景 #

如果你的站点是不需要刷新页面的单页应用，直接修改点击事件逻辑：阻止默认跳转，修改完激活状态后用前端路由切换内容，不要用window.location.href触发页面刷新。
如果是锚点跳转场景，可以在修改完激活状态后手动滚动到对应锚点位置即可。

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