如何用jQuery根据当前页面设置导航栏样式？

完全可行，以下是具体实现思路和代码：

步骤1：统一所有页面的导航HTML结构 #

先把所有页面的导航栏改成统一的完整结构，每个导航项都保留<a>标签，不要提前手动修改任何项：

<nav id="bar">
  <ul id="nav">
    <li><a href="aa.html">AA</a></li>
    <li><a href="bb.html">BB</a></li>
    <li><a href="cc.html">CC</a></li>
    <li><a href="dd.html">DD</a></li>
  </ul>
</nav>

步骤2：编写通用jQuery代码 #

在所有页面引入jQuery后，添加以下脚本：

$(document).ready(function() {
  // 获取当前页面的文件名（如aa.html、dd.html）
  var pagename = window.location.pathname.split('/').pop();
  
  // 先清除所有导航项的page标识，避免id重复（HTML要求id唯一）
  $('#nav li').removeAttr('id');
  
  // 定位到对应页面的导航链接的父元素li
  var currentNavItem = $('#nav li a[href="' + pagename + '"]').parent();
  
  // 移除li内部的a标签，仅保留文本内容
  currentNavItem.html(currentNavItem.find('a').text());
  
  // 给当前导航项设置page id，匹配原样式需求
  currentNavItem.attr('id', 'page');
});

核心实现思路 #

• 统一结构：所有页面用完全相同的导航代码，确保脚本能一致处理
• 状态重置：先移除所有li的page id，避免同一页面出现多个相同id的元素
• 精准匹配：通过属性选择器a[href="' + pagename + '"]定位到当前页面对应的导航链接
• 内容替换：将li内的a标签替换为纯文本，同时保留原导航文字
• 标识设置：给当前导航项添加page id，让CSS样式能正确匹配当前页

注意事项 #

• 确保每个页面都正确引入了jQuery库（路径要正确）
• 页面文件名和导航中href属性的文件名要完全一致（包括大小写）
• 如果页面部署在子目录中，window.location.pathname.split('/').pop()依然能正确提取文件名，无需额外修改

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