温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年11月16日，已超过 180天没有更新

通过判断地址栏的链接和代码里导航部分的链接一致的话就高亮，分享出来给大家参考。

demo下载：

js_Current

HTML部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js_Current</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="nav.js"></script>
</head>
<body>
 
    <div class="nav">
        <ul>
            <li><a href="demo2.html">菜单一</a></li>
            <li><a href="demo1.html">菜单二</a></li>
        </ul>
    </div>    
    
</body>
</html>

JS代码部分：

    //js部分
$(document).ready(function(){
if(String(window.location).indexOf("php")<0){  //判断是否是首页.文件后缀
$(".nav li:eq(0)").addClass("active");//第一个li获得样式
};
a=window.location;
$(".nav li a").each(function(){
b=String($(this).attr("href")).replace("/","")//首页如果用的是域名可不用replace
if(String(a).indexOf(b)>0){//获得当前li下a的href值，并进行替换
 $(this).closest("li").addClass("active");
}
});
});
历史上的今天
11月
16
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。