JavaScript实现当前页导航高亮激活
作者:函数茶馆时间:2026-10-28 23:01:30浏览:429
本文介绍利用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程序设计的内容能对读者有所帮助。
作者最新文章
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
