动态导航条 当前超链接高亮显示
CSS:
CSS Code
<! -- .nav { margin: 1px 0; width: 100%; font-family: verdana; height: 21px; background-color: #E6F2FF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .nav UL { padding: 0px; display: block; margin: 0px; list-style-type: none; height: 21px; background-color: #E6F2FF; /*970B0B*/ color: #333333; } .nav LI { border-right: #ffffff 1px solid; display: block; float: left; height: 21px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .nav LI A { padding: 1px 15px 0; display: block; font-weight: bold; color: #333; line-height: 20px; text-decoration: none; } .nav LI A:hover { color: #562505; background-color: #f4f524; /**/ text-decoration: none; } .nav LI A:active { color: #ffffff; background: #86F2E4; /*D42524 D425FF */ text-decoration: underline; } .nav LI A:visited { color: #342578; text-decoration: none; } .current { color: #ffffff; background: #86F2E4; /*D42524 D425FF */ } .nav li#date { color: #ffffff; padding: 2px 15px 0; } -- >
Javascript:
window.onload=function menuFix() { var strUrl,strHref; var Navs=document.getElementById("nav1").getElementsByTagName("a"); //nav1是ul 的id // 如果链接没有参数,或者URL链接中不存在我们要获取的参数,则返回数组中的序号 strUrl=location.href.substring(location.href.lastIndexOf("/")+1);//取得URL页面名称 for (var i = 0; i < Navs.length; i++) { strHref=Navs[i].getAttribute("href").substring(Navs[i].getAttribute("href").lastIndexOf('/')+1); ///在IE6,IE7中strHref获得的是全路径,而在IE8和ff中获得的是页面名称,为了兼容,需要将它的字符串进行拆分/ if(strUrl==strHref){//高亮当前菜单 Navs[i].className = "current" } else{ Navs[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "over"; } Navs[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)over\\b"),""); } } } }
HTML
<div> <ul id="nav1" class="nav"> <li style="border: 0"><a href="NavTest2.aspx?id=1">Index</a></li> <li><a href="NavTest2.aspx?id=2">Product</a></li> <li><a href="NavTest2.aspx?id=3">Service</a></li> <li><a href="NavTest2.aspx?id=4">Support</a></li> <li><a href="NavTest2.aspx?id=5">About us</a></li> <li><a href="NavTest2.aspx?id=6">BBS</a></li> </ul> </div>
Be the change you want to see in the world.