导航高亮

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

最新版,主导航高亮,子导航高亮!

(function() {
  $(function(){
  //开始。。。。。。。。。。。。。。。。。。。。。。。。。
//导航高亮方法 var urlstr = location.href;     //获取浏览器的url var urlstatus = false;         //标记   //遍历导航div $("#menu a,#nav a").each(function() { //判断导航里面的rel和url地址是否相等 if ((urlstr + '/').indexOf($(this).attr('rel')) > -1 && $(this).attr('rel') !='') { $(this).addClass('cur'); //主菜单高亮 var menuId = $(this).attr("data-id"); if (menuId) { $("#" + menuId).addClass("cur"); $(this).addClass('on'); //子菜单高亮 urlstatus = true; //return false; //是否停止循环 } } else { $(this).removeClass('cur'); } });
//结束。。。。。。。。。。。。。。。。。。。 }); })(jQuery);
<div id="menu">
        <ul>
            <li><a href="link.html" id="linkOne" rel="link.html">link</a></li>
            <li><a href="link2.html" id="linkTwo" rel="link2.html">link</a>
                <dl>
                  <dd><a href="nav1.html" rel="nav1.html" data-id="linkTwo">子菜单1</a></dd>
                  <dd><a href="nav2.html" rel="nav2.html"  data-id="linkTwo">子菜单2</a></dd>
              </dl>
            </li>
            <li><a href="link3.html" id="linkThree" rel="link3.html">link</a></li>
        </ul>
    </div>

    <div id="nav">
        <ul>
            <li>
                <a href="nav1.html" rel="nav1.html" data-id="linkTwo">子菜单1</a>
                <a href="nav2.html" rel="nav2.html" data-id="linkTwo">子菜单2</a>
            </li>
        </ul>
    </div>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

http://www.cnblogs.com/Dtscal/p/acv.html

if(nowUrl == ctx+"/center/personal/index.xhtml" || nowUrl == ctx+"/center/school/index.xhtml" || nowUrl == ctx+"/center/company/index.xhtml" ){
				//首页高亮
				$("#indexMenu").addClass("hover1");
			}else{
				$("a").each(function(){
					var getUrl = $(this).attr("href");
					if(getUrl == nowUrl ){
						var menuId= $(this).attr("data-fatherId");
						if(menuId){
							$("#"+menuId).addClass("hover1");
							return false;
						}
						
					}
				})
			}

var urlstr = location.href;    //获取浏览器的url
 var urlstatus=false;        //标记
 //遍历导航div
 $("#menu a").each(function () {
//判断导航里面的rel和url地址是否相等
  if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
   $(this).addClass('cur'); urlstatus = true;
  } else {
   $(this).removeClass('cur');
  }
 });
//当前样式保持
 if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }

明天来完善



原文地址:https://www.cnblogs.com/hupan508/p/5440466.html