如何为HTML嵌入菜单设置当前页面的CSS高亮效果？

看起来你遇到的问题主要有两个核心点：一是动态嵌入的菜单没有自动给当前页面的菜单项加上active类，二是原CSS选择器的权重可能不够导致样式不生效。下面一步步来解决：

1. 动态给当前页面菜单添加active类 #

因为你的菜单是通过w3-include-html共用的header.html，不可能每个页面都手动修改这个文件来加active类，所以得用JavaScript来自动判断当前页面并添加类。

首先确保你已经引入了w3.js（建议使用本地文件，避免外链依赖），然后在页面中添加这段脚本：

// 等待菜单加载完成后执行逻辑
w3.includeHTML(function() {
  // 获取当前页面的文件名（比如index.html、page2.html）
  const currentPage = window.location.pathname.split('/').pop();
  // 遍历所有菜单链接
  const menuLinks = document.querySelectorAll('.main-menu ul li a');
  
  menuLinks.forEach(link => {
    // 对比链接的href和当前页面文件名
    if (link.getAttribute('href') === currentPage) {
      link.classList.add('active');
    }
  });
});

这段代码会在菜单加载完成后，自动识别当前页面，给对应的菜单链接加上active类。

2. 调整CSS选择器确保样式生效 #

你原来的CSS可能因为选择器权重不够，被其他默认样式覆盖了。可以把选择器写得更具体一些，提升优先级：

/* 更具体的选择器，确保高亮样式生效 */
.nav-menu .main-menu ul li a.active {
  color: #0061bb;
  /* 可选：添加额外高亮效果，比如加粗或下划线 */
  font-weight: 600;
  border-bottom: 2px solid #0061bb;
}

为什么原来的代码没生效？ #

• 核心原因是当前页面的菜单链接没有active类：因为菜单是共用的，你没有手动或自动给对应页面的链接加上这个类，CSS自然无法选中目标元素。
• 其次是选择器权重问题：如果你的菜单有其他默认样式（比如.main-menu ul li a），它的优先级和.main-menu a.active是一样的，后面加载的样式会覆盖前面的，或者默认样式的来源更具体，导致你的高亮样式不生效。

测试小技巧 #

修改完后，打开浏览器开发者工具（F12），查看当前页面的菜单链接元素，确认是否已经加上了active类，同时检查CSS面板里你的高亮样式是否被应用（没有划掉的状态）。

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