js实现导航菜单高亮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{ padding: 0px; margin: 0px; text-decoration: none; list-style: none;}
#navi{ width: 1200px; height: 50px; float: left;}
#navi ul{ width:1200px; height: 50px; float: left;}
#navi ul li{ width: 600px; height: 50px; float: left; text-align: center; }
#navi ul li a{ font-size: 30px; color: #000; line-height: 50px;}
.hl{
color:#123456;
background: red;
}
</style>
<body>
<div id="navi">
<ul>
<li><a href="1.html">主页</a></li>
<li><a href="2.html">栏目1</a></li>
</ul>
</div>
<script type="text/javascript" language="javascript">
var nav = document.getElementById("navi");
var links = nav.getElementsByTagName("li");
var lilen = nav.getElementsByTagName("a");
var currenturl = document.location.href;
var last = 0;
for (var i=0;i<links.length;i++)
{
var linkurl = lilen[i].getAttribute("href");
if(currenturl.indexOf(linkurl)!=-1)
{
last = i;
}
}
links[last].className = "hl";
</script>
</body>
</html>