js 导航判断高亮
前几天有个同学问说他有个 cms 没有 if 判断标签，php 还不会写，我就给他写了个能用的 jq，原理就是通过判断地址栏的链接和代码里导航部分的链接一致的话就高亮，分享出来给大家参考。
Demo 下载：
<!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部分
$(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");
}
});
});本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019年06月29日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
