[自用门户]点击菜单变颜色

来源:互联网 发布:plc简单编程实例 编辑:程序博客网 时间:2024/04/28 08:31
//js部分(function($){//mark20170901高亮点击后的菜单,除首页  $(function(){  var urlstr = location.href;    //获取浏览器的url  var urlstatus=false;        //标记 //遍历导航div  $(".menu li a").each(function () {//判断导航里面的rel和url地址是否相等console.log(urlstr+'/'+' --break--- '+($(this).attr('ref'))); if ((urlstr).indexOf($(this).attr('ref')) > -1&&$(this).attr('ref')!='') {      $(this).parent().addClass('m1cur'); urlstatus = true;    } else {        $(this).parent().removeClass('m1cur');      }  });//当前样式保持  if (!urlstatus) {$("#menu li a").eq(0).addClass('m1cur'); }  })})(jQuery);

html部分

<div class="topbar">    <div class="tb-main">        <div class="navigate">            <ul class="menu">                <li><a href="${base}/index.jhtml" ref="/01/index.jhtml"><i class="iconfont"></i>首页</a></li><li>  <!--onMouseOver="document.getElementById('Company').style.display='block';" onMouseOut="document.getElementById('Company').style.display='none';"--><a href="/gsjj/index.jhtml" ref="/gsjj/index.jhtml""><i class="iconfont"></i>公司简介</a>                </li>                <li>  <!--onMouseOver="document.getElementById('Raws').style.display='block';" onMouseOut="document.getElementById('Raws').style.display='none';"-->                    <a href="/flfg/index.jhtml" ref="/flfg/index.jhtml"><i class="iconfont"></i>法律法规</a>                </li>                <li>  <!--onMouseOver="document.getElementById('Notice').style.display='block';" onMouseOut="document.getElementById('Notice').style.display='none';"-->                    <a href="/cgyj/index.jhtml" ref="/cgyj/index.jhtml"><i class="iconfont"></i>采购研究</a>                    <!--  采购研究二级菜单  -->                </li>                <li>  <!--onMouseOver="document.getElementById('News').style.display='block';" onMouseOut="document.getElementById('News').style.display='none';"-->                    <a href="/gys/index.jhtml" ref="/gys/index.jhtml"><i class="iconfont"></i>下载中心</a>                </li>                <li>  <!--onMouseOver="document.getElementById('Center').style.display='block';" onMouseOut="document.getElementById('Center').style.display='none';"-->                    <a href="/czzngys/index.jhtml" ref="/czzngys/index.jhtml"><i class="iconfont"></i>操作指南</a>                    <!--  操作指南二级菜单  -->                </li>                <li>  <!--onMouseOver="document.getElementById('Conus').style.display='block';" onMouseOut="document.getElementById('Conus').style.display='none';"-->                    <a href="/lxwm/index.jhtml" ref="/lxwm/index.jhtml"><i class="iconfont"></i>联系我们</a>                    <!--  联系我们二级菜单  -->                </li>