💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
个人比较喜欢用 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