js实现页面跳转菜单选中

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
假设你的左侧菜单是一个列表,每个菜单项都有一个对应的路由路径,那么你可以使用`vue-router`和`router-link`组件来实现左侧菜单选中右侧转页面的功能。 首先,在你的Vue项目中安装`vue-router`: ``` npm install vue-router ``` 然后,在你的Vue项目中创建一个路由文件,比如`router.js`,定义你的路由配置: ```javascript import VueRouter from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' import Contact from './views/Contact.vue' const router = new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/contact', name: 'contact', component: Contact } ] }) export default router ``` 在这个例子中,我们定义了三个路由:`/`对应`Home`组件,`/about`对应`About`组件,`/contact`对应`Contact`组件。 接下来,在你的Vue项目中使用`router-link`组件来渲染你的左侧菜单列表。你可以给`router-link`组件传递一个`to`属性,来指定它所对应的路由路径。当用户点击左侧菜单列表中的某一项时,Vue会根据路由路径自动转到对应的页面。 ```html <template> <div> <ul> <li> <router-link to="/">Home</router-link> </li> <li> <router-link to="/about">About</router-link> </li> <li> <router-link to="/contact">Contact</router-link> </li> </ul> <router-view></router-view> </div> </template> ``` 在这个例子中,我们使用`router-link`组件来渲染左侧菜单列表。当用户点击左侧菜单列表中的某一项时,Vue会自动转到对应的组件。 最后,你需要在你的Vue项目中引入`router.js`文件,并在`main.js`中注册路由: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app', router, render: h => h(App), }) ``` 现在,当用户点击左侧菜单列表中的某一项时,Vue会自动转到对应的组件,实现了左侧菜单选中右侧转页面的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值