点击菜单跳转页面给点击的菜单添加新的样式

/** * 思路： * 1.首先获取到： * ul下的菜单集合(A) * 当前地址栏菜单(B) * 上一次点击的菜单地址(C) * 2.然后判断循环判断A里面的地址是不是“#”,#表示有子菜单； * 如果有子菜单，则获取子菜单集合(D)，然后当前地址和子菜单集合对比，相同的话给A加上样式，否则判断上一次点击的地址C和D对比 * 3.此次判断当前地址和A对比，如果匹配不到，则最后一次的时候，以上一次的菜单C和A“循环”对比 */ //页面加载完成执行 window.onload = function() { /** ul下的菜单集合(A) */ var liStr = $(".main-sidebar .sidebar .sidebar-menu").children(); /**当前地址栏菜单(B)*/ var browserUrl = location.href; /** 封装地址 */ /** 封装前：http://localhost:8080/es/order/orderInfoQuery.htm */ var spritIndex1 = browserUrl.replace('/', 'a').replace('/', 'a').indexOf('/'); /** 封装后：/es/order/orderInfoQuery.htm*/ var urlStr = browserUrl.substring(spritIndex1, browserUrl.length + 1); /** 上一次点击的菜单地址(C) */ var spritIndex2 = document.referrer.replace('/', 'a').replace('/', 'a').indexOf('/');// var lastUrl = document.referrer.substring(spritIndex2, browserUrl.length + 1); for (var int = 0; int < liStr.length; int++) { // 因为还有子菜单，所以，如果urlStr等于遍历出来的一级菜单中的某一个或者是二级菜单 // 则把一级菜单加一个类或者把二级菜单的父菜单加一个类 if ($(liStr[int]).children("a").attr("href") == "#") {// "#" 表示有二级菜单 // 如果是树形菜单，则获取树形菜单的子菜单，进行对比 var childLi = $(liStr[int]).children("ul").children(); for (var int2 = 0; int2 < childLi.length; int2++) { if (urlStr == $(childLi[int2]).children("a").attr("href")) {// 如果地址栏地址等于子菜单 // 把父菜单添加样式 $(liStr[int]).children("a").css({"color" : "white",background : "rgba(55,114,151,1)"}); //把父类菜单打开 $(liStr[int]).children("ul").css({display:"block"}); return; }else{ if (lastUrl == $(childLi[int2]).children("a").attr("href")) { // 把父菜单添加样式 $(liStr[int]).children("a").css({"color" : "white",background : "rgba(55,114,151,1)"}); //把父类菜单打开 $(liStr[int]).children("ul").css({display:"block"}); return; } } } } else if (urlStr == $(liStr[int]).children("a").attr("href")) { $(liStr[int]).children("a").css({"color" : "white",background : "rgba(55,114,151,1)"}); return; } else if (int == (liStr.length-1)) { for (var int3 = 0; int3 < liStr.length; int3++) { if (lastUrl == $(liStr[int3]).children("a").attr("href")){ $(liStr[int3]).children("a").css({"color" : "white",background : "rgba(55,114,151,1)"}); return; } } } } } 树形菜单格式： <ul> <li><a href="地址">a</a></li> <li><a href="地址">b</a></li> <li><a href="地址">c</a></li> <li><a href="#">d</a> <ul> <li><a href="地址">a</a></li> <li><a href="地址">b</a></li> </ul> </li> </ul> //附加:页面加载，如果当前页面是二级菜单，则设为打开 function openMenu(menuId){ if ($("#"+menuId+" .childrenMenu").css("display") == "none" || $(".childrenMenu").css("display") == "") { $("#"+menuId+" .childrenMenu").css({display:"block"}); }else{ //$("#"+menuId+" .childrenMenu").css({display:"none"}); } }