js實現頁面跳轉選單選中
阿新 • • 發佈:2019-01-11
<div class="headerpanel"> <div class="headerlist"> <ul> <li class="active" role="cashierMenu"> <a href="<%=topBasePath %>KeepAccounts/initializeShiftMahjong"> <div class="img-wrap"> <img src="<%=topBasePath %>images/iconfont-jizhang.png" alt=""/> </div> <div>收銀記賬</div> </a> </li> <li role="membersMenu"> <a href="<%=topBasePath %>member/view/list"> <div class="img-wrap"> <img src="<%=topBasePath %>images/iconfont-huiyuanyingxiao.png" alt=""/> </div> <div>會員營銷</div> </a> </li> <li role="priceSetMenu"> <a href="<%=topBasePath %>hairstyleDesign/view/toHairstyleDesign"> <div class="img-wrap"> <img src="<%=topBasePath %>images/iconfont-jiageshezhi.png" alt=""/> </div> <div>服務設定</div> </a> </li> <li role="employeeMenu"> <a href="<%=topBasePath %>position/view/positioninfo"> <div class="img-wrap"> <img src="<%=topBasePath %>images/iconfont-yuangongshezhi.png" alt=""/> </div> <div>員工設定</div> </a> </li> <li role="wechatMenu"> <a href="<%=topBasePath %>artic/manager"> <div class="img-wrap"> <img src="<%=topBasePath %>images/iconfont-weimeituoke.png" alt=""/> </div> <div>微美拓客</div> </a> </li> <li role="financialMenu"> <a href="<%=topBasePath %>"> <div class="img-wrap"> <img src="<%=topBasePath %>images/iconfont-zhinengbaobiao.png" alt=""/> </div> <div>智慧報表</div> </a> </li> <li role="settingMenu"> <a href="<%=topBasePath %>"> <div class="img-wrap"> <img src="<%=topBasePath %>images/iconfont-caiwufenxi.png" alt=""/> </div> <div>系統設定</div> </a> </li> </ul> <div class="user-info"> <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/page.html">Hi, 歐陽利好! <b class="caret"></b></a> </div> </div> </div>
<div class="leftpanel"> <div class="logo-wrap"> <img src="<%=menuBasePath %>images/logo.png" alt=""/> </div> <div class="leftmenu"> <!-- 服務設定模組 --> <ul class="nav nav-tabs nav-stacked" role="priceSetMenu"> <img src="<%=menuBasePath %>images/left-active.png" alt="" class="left-active-img"/> <li class="active" name="toHairstyleDesign" > <a href="<%=menuBasePath %>hairstyleDesign/view/toHairstyleDesign"> <div class="img-wrap"> <i class="iconfont icon-xiangmu left-icon"></i> </div> 髮型設定 </a> </li> <img src="<%=menuBasePath %>images/left-active.png" alt="" class="left-active-img hide"/> <li name="projectList" > <a href="<%=menuBasePath %>project/view/projectList"> <div class="img-wrap"> <i class="iconfont icon-xiangmu left-icon"></i> </div> 專案設定 </a> </li> <img src="<%=menuBasePath %>images/left-active.png" alt="" class="left-active-img hide"/> <li name="comboInfoList" > <a href="<%=menuBasePath %>comboInfo/view/comboInfoList"> <div class="img-wrap"> <i class="iconfont icon-huli2 left-icon"></i> </div> 套餐設定 </a> </li> <img src="<%=menuBasePath %>images/left-active.png" alt="" class="left-active-img hide"/> <li name="goodsInfoList" > <a href="<%=menuBasePath %>goodsInfo/view/goodsInfoList"> <div class="img-wrap"> <i class="iconfont icon-shangpin-XS left-icon"></i> </div> 商品設定 </a> </li> <img src="<%=menuBasePath %>images/left-active.png" alt="" class="left-active-img hide"/> <li name="goodsStockList" > <a href="<%=menuBasePath %>goodsInfo/view/goodsStockList"> <div class="img-wrap"> <i class="iconfont icon-shangpin-XS left-icon"></i> </div> 商品庫存 </a> </li> <img src="<%=menuBasePath %>images/left-active.png" alt="" class="left-active-img hide"/> <li name="supplierInfoList" > <a href="<%=menuBasePath %>supplierInfo/view/supplierInfoList"> <div class="left-content"> <div class="img-wrap"> <i class="iconfont icon-gongyingshang-GL left-icon"></i> </div> 供應商管理 </div> </a> </li> </ul> </div> </div>
<script type="text/javascript"> jQuery(document).ready(function(){ initMenu(); }); function initMenu(){ var url = window.location.href; jQuery('.left-active-img').addClass('hide');//隱藏其他選單 var curLi = jQuery("a[href='" + url + "']").parent(); curLi.addClass('active').siblings('li').removeClass('active'); var curImg = curLi.prev(); curImg.removeClass('hide').siblings('img').addClass('hide'); var curUl = curImg.parent(); curUl.removeClass('hide').siblings('ul').addClass('hide');;//顯示當前地址的選單 jQuery('.headerlist li').removeClass('active'); jQuery("li[role='" + curUl.attr('role') + "']").addClass('active'); } </script>