移动端导航菜单点击跳转后当前页面对应链接高亮状态不更新问题

故障根因 #

• 高亮类添加方式错误：e.classList += " current"属于非法写法，classList是DOMTokenList对象而非字符串，该操作不会成功添加current类，仅首次进入首页时的默认高亮能正常显示
• 部分导航项未匹配选择器：Formação、Contato两个导航链接没有加btn类，原有JS选择器.topnav .btn不会遍历这两个元素，永远无法触发高亮
• HTML结构不规范：导航DIV写在<head>标签内部，移动端浏览器解析时可能出现DOM加载顺序异常，导致JS遍历不到导航元素

修复步骤 #

步骤1：替换JavaScript逻辑 #

// 等待DOM完全加载后执行高亮逻辑
document.addEventListener('DOMContentLoaded', function() {
  const currentHref = window.location.href;
  // 匹配所有导航链接，排除汉堡菜单按钮
  document.querySelectorAll(".topnav a:not(.icon)").forEach(function(e) {
    if(e.href === currentHref) {
      // 调用add方法正确添加高亮类
      e.classList.add("current");
    }
  });
})

// 保留原有汉堡菜单折叠逻辑
function myFunction () {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

步骤2：补全导航项样式类 #

给所有导航链接统一添加btn类，确保样式和选择器匹配：

<div class="topnav" id="myTopnav">
  <a class="btn" href="{% url 'project_index' %}">Apresentação</a>
  <a class="btn" href="#news">Formação</a>
  <a class="btn" href="{% url 'form_page' %}">Cadastro</a>
  <a class="btn" href="#about">Contato</a>
  <a class="icon" href="javascript:void(0);" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

步骤3：修正HTML结构 #

将整个topnav导航DIV从<head>标签中移出，放到<body>标签的最开头位置，保证DOM解析顺序正常。

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