个人比较喜欢用 js 来完成当前菜单的的高亮,原理呢其实很简单,就是使用`window.location` 中的一些属性与菜单中 `a` 标签的 `href` 进行对比, 发现相同的时候就把它点亮,很简单吧?
比如我们当前链接为:`http://laravel.so/admin/posts`, 我们的菜单为:
~~~
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<li class="treeview">
<a href="http://laravel.so/admin">控制面板</a>
</li>
<li class="treeview">
<a href="#">文章管理</a>
<ul class="treeview-menu" style="display: none;">
<li><a href="http://laravel.so/admin/posts">文章列表</a></li>
<li><a href="http://laravel.so/admin/posts/create">新建文章</a></li>
</ul>
</li>
...
~~~
此时:
> `window.location.origin` 为 http://laravel.so
> `window.location.pathname` 为 /admin/posts
这时候我们就可以遍历菜单,或者直接用`[href=xxxx]`选择器去找到对应的a 标签,作对应的 css 样式调整,或者触发 js 动作即可完成高亮。
下面以 AdminLTE 模板为例,对于一级菜单来说直接加上`active`这个 class 就好了,如果当前匹配的在二级,应该把父级触发高亮。
~~~
jQuery(document).ready(function($) {
// 左侧菜单高亮
var currentMenu = $('.sidebar-menu a[href="'+window.location.origin + window.location.pathname+'"]:first');
if (currentMenu) {
var treeview = currentMenu.closest('.treeview');
if (treeview.find('ul').length) {
return treeview.find('a:first').trigger('click');
} else {
return treeview.addClass('active').siblings().removeClass('active');
}
};
});
~~~
这样其实很方便的低成本完成了菜单的高亮,如果你有更好的方法欢迎分享。
来源:http://laravel.so/tricks/bcf5247b77fb838ce10115c6adf2fc68