本文介绍利用JavaScript结合jQuery实现网页导航栏当前页自动高亮的方法。通过获取当前页面URL并与导航链接进行比对，为匹配的列表项添加指定class，从而在CSS中实现视觉区分。
JavaScript实现当前页导航高亮
本文介绍一种利用JavaScript实现网页导航栏当前页面高亮显示的技术方案，供开发者参考。
HTML导航结构
HTML结构部分：需构建标准的导航链接列表，注意链接地址必须为真实路径，不可使用占位符#，建议通过新建多个静态页面进行实际测试。
<ul id="nav">
<li><a href="/">首页</a></li>
<li><a href="/category/html-css/">HTML/CSS</a></li>
<li><a href="/category/javascript/">JavaScript</a></li>
<li><a href="/category/seo/">SEO</a></li>
<li><a href="/category/front-end/">前端新闻</a></li>
</ul>JavaScript激活逻辑
JavaScript逻辑部分：核心功能是为当前访问页面所对应的导航项添加名为.on的CSS类名，以标识激活状态。
$(function() {
var a1 = document.URL;
var a2 = $("#nav a");
for (var i = 0; i < a2.length; i++) {
if (a1.indexOf($(a2[i]).attr("href")) != -1) {
$(a2[i]).parent().addClass("on");
return;
}
}
$(a2[0]).parent().addClass("on");
})CSS样式定义
CSS样式部分：开发者可根据实际设计需求，对导航项的布局、颜色及背景图片等样式进行相应调整。
#nav li{
display:inline-block;
float:left;
text-align:center;
height:36px;
padding-left:4px;
line-height:36px;
background:url(images/nav.gif) no-repeat right bottom;
}
#nav li a{
display:block;
color:#777;
padding:0 15px 0 10px;
}
#nav li.on{
font-weight:bold;
background:url(images/nav.gif) no-repeat 0 0;
margin-left:-3px;
}
#nav li.on a{
background:url(images/nav.gif) no-repeat right 0;
}希望上述关于JavaScript程序设计的内容能对读者有所帮助。