個人比較喜歡用 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
