HTML代码如下
<ul class="sidebar-menu" id="sidebar-menu">
<li class=""><a href="{:url('index/index')}">控制面板</a></li>
<li class="treeview">
<a href="#">系统管理</a>
<ul class="treeview-menu">
<li><a href="admin/config/index">配置管理</a></li>
<li><a href="admin/user/index">用户管理</a></li>
</ul>
</li>
</ul>
尝试方案概述
获取当前页面的URL地址,找到href=当前页面URL的菜单addClass。
情况具体分析
情况A:如进入控制面板这种一级菜单无二级菜单的,则控制面板的父元素<li> addClass('active')便可。
情况B:进入用户管理这种二级菜单,除了要给用户管理的父元素<li> addClass('active') 之外,还要给这个<li>的父元素<ul>(class=treeview-menu)同时addClass('menu-open'),然后再父级是系统管理的li 同时addClass('active');至此,基本菜单的高亮就算搞定了。
特殊情况C:有一些页面可能是菜单中页面的子页面(并不出现在菜单中)如用户管理(admin/user/index),可能还会有一些子页面 添加编辑(admin/user/add 或 edit...)等,当进入这样的页面时由于当前页面的url在菜单中找不到所以,不会有任何菜单高亮;
菜鸟我的解决方案欢迎各位大神讨论
情况A和B全局写一个高亮的方法,获取url查找元素,给元素addClass,如需要则给父元素也addClass。
情况C单独function一个方法,如set_menu_active(url),在情况C的页面传入想要高亮的菜单的url ,如进入添加用户(admin/user/add)页面的时候页面底部调用并传值set_menu_active('admin/user/index');
至此这就是我想的大概实现方法,但是总感觉有些笨笨的,所有的不出现在菜单的页面我都要在页面调用ser_menu_active方法来传url让相应菜单高亮,总感觉麻烦,欢迎各位大神踊跃提出你的想法,如果能有示例代码最佳。。。
这里只讨论Jquery实现方法,后端方法不讨论