zoukankan      html  css  js  c++  java
  • 导航栏动态高亮显示

     <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>
  • 相关阅读:
    记:vue-router报错: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
    使用vuepress搭建GitHub pages静态博客页面
    APPCNA 手势验证登录
    appcan 文件下载与预览
    上传文件-layui+ashx
    2020已经过去五分之四了,你确定还不来了解一下JS的rAF?
    《Python 测试开发技术栈—巴哥职场进化记》—每日站会的意义
    Netty 增加接收缓冲区大小
    我想把Jhipster介绍给你
    如何写好转正答辩PPT
  • 原文地址:https://www.cnblogs.com/wanglinglong/p/1624771.html
Copyright © 2011-2022 走看看