使用.htaccess重写规则后菜单按钮高亮失效，求解决方法

问题根源 #

菜单高亮通常依赖当前页面URL与菜单链接的href属性完全匹配。启用无后缀URL重写后，页面URL从xxx.html变成了xxx，但如果菜单链接仍保留.html后缀，或者前端高亮判断逻辑未适配无后缀路径，就会出现匹配失败，高亮失效的情况。

解决方案（保留重写规则的前提下） #

1. 统一菜单链接为无后缀格式

直接修改所有菜单的href属性，把带.html的链接改成无后缀格式：

• 原链接：<a href="/cool-page.html">酷页面</a>
• 修改后：<a href="/cool-page">酷页面</a>
  这样当前URL与链接路径完全一致，就能正常触发高亮逻辑。

2. 调整前端高亮判断逻辑（无法修改菜单链接时）

如果菜单链接必须保留.html后缀，就修改前端的高亮判断代码，忽略URL的后缀差异。以下是JavaScript示例：

// 原生JS实现高亮适配
document.addEventListener('DOMContentLoaded', function() {
  const currentPath = window.location.pathname.replace(/\.html$/, '');
  const menuLinks = document.querySelectorAll('nav a');
  
  menuLinks.forEach(link => {
    const linkPath = link.getAttribute('href').replace(/\.html$/, '');
    if (currentPath === linkPath) {
      link.classList.add('active'); // 替换为你的高亮类名
    }
  });
});

3. 动态页面调整链接生成逻辑

如果你的页面是CMS（如WordPress、Drupal）或动态生成的，需要检查后台的链接配置：

• 确保固定链接设置为无后缀格式（比如WordPress后台“设置-固定链接”选择“文章名”）
• 修改模板或生成链接的代码，输出无后缀的href值

额外优化：合并.htaccess规则 #

你当前的两个规则重复写了RewriteEngine On，可以合并成一个更简洁的版本：

RewriteEngine On 
# 重定向index.html到根目录/对应子目录
RewriteRule ^index.html$ / [R=301,L] 
RewriteRule ^(.*)/index.html$ /$1/ [R=301,L]
# 无后缀URL映射到对应HTML文件
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^([^.]+)$ $1.html [NC,L]

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