菜单高亮
借助于Mr.Think写的利用url实现菜单高亮。
判断当前url（window.location.href）与页面中的a标签的href属性值是否相等。
如果相等则显示高亮。
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>HihgLight Menu</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Mr.Think">
<META NAME="Keywords" CONTENT="菜单高亮，JavaScript">
<META NAME="Description" CONTENT="菜单当前页高亮，单击后高亮">
<style type="text/css" media="all">
#nav{padding:0px;margin:0px;}
#nav li{display:inline;}
#nav li a{ text-decoration:none; padding:5px 10px; border:1px solid #ddd;color:#666;}
#nav li a:hover{ border:1px solid #f90; background:#FFFFCC; color:#f60;}
.sub_nav_hover{ border:1px solid #f90; background:#FFFFCC; color:#f60;}
</style>
<script language="javascript">
//@Mr.Think---http://mrthink.net
//判断URL实现菜单高亮显示
function highURL(menuId,classCur){
var menuId=document.getElementById(menuId);
var links=menuId.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
var menuLink=links[i].href;
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links[i].className=classCur;
}
}
}
//点击实现高亮显示
function highOnclick(elemId,classCur){
var elemId=document.getElementById(elemId);
var links=elemId.getElementsByTagName("a");
for(i=0;i<links.length;i++){
links[i].onclick=function(){
for(n=0;n<links.length;n++){
links[n].className="";
this.className=classCur;
this.blur();
}
}
}
}
//窗体加载函数事件
window.onload=function highThis(){
highURL("nav"," sub_nav_hover");
highOnclick("nav","sub_nav_hover");
}
</script>
</HEAD>
<BODY>
<div id="nav_bar">
<ul id="nav">
<li><a href="#index">index</a></li>
<li><a href="#blog">blog</a></li>
<li><a href="#photos">photos</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#about us">about us</a></li>
</ul>
</div>
</BODY>
</HTML>
