导航栏动态高亮显示

 <ul id="navcla">
                <li style="border: 0"><a href="AboutOurs.aspx?id=1">关于我们</a></li>
                <li><a href="Coterie.aspx">同行入口</a></li>
                <li><a href="Travel.aspx">度假旅游</a></li>
                <li><a href="DiscountFlight.aspx">公司简介</a></li>
                <li><a href="#">酒店预订</a></li>
                <li><a href="InternationalFlight.aspx">国际机票</a></li>
                <li><a href="FlightSearch.aspx">国内机票</a></li>
                <li><a href="Index.aspx">首 页</a></li>
            </ul>




<script type="text/javascript">
 window.onload=function menuFix() {
 var strUrl,strHref;
 var Navs=document.getElementById("navcla").getElementsByTagName("a");     //navcla是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"),"");
       }  
     }
  }
}
</script>
posted @ 2009-12-15 14:21  不必太用力  阅读(550)  评论(0编辑  收藏  举报