js実装ページジャンプメニュー選択
8128 ワード
<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>