---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
最新版,主导航高亮,子导航高亮!
(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'); }
明天来完善