Javascript 菜单活动当前页面
我正在使用Bootstrap AdminLTE,我想激活当前页面的菜单项。 问题是,我不知道怎么做。 除了在每个php文件中更改它之外,我还考虑了一些解决方案,比如为每个链接添加一个IF语句,我认为这是一个糟糕的解决方案Javascript 菜单活动当前页面,javascript,php,jquery,twitter-bootstrap,adminlte,Javascript,Php,Jquery,Twitter Bootstrap,Adminlte,我正在使用Bootstrap AdminLTE,我想激活当前页面的菜单项。 问题是,我不知道怎么做。 除了在每个php文件中更改它之外,我还考虑了一些解决方案,比如为每个链接添加一个IF语句,我认为这是一个糟糕的解决方案 <ul class="sidebar-menu"> <li class="header">HOOFD MENU</li> <li class='treeview'>
<ul class="sidebar-menu">
<li class="header">HOOFD MENU</li>
<li class='treeview'>
<a href='#'>
<i class='fa fa-dashboard'></i> <span>Dashboard</span>
<span class='pull-right-container'>
<i class='fa fa-angle-left pull-right'></i>
</span>
</a>
<ul class='treeview-menu'>
<li><a href='account.php'><i class='fa fa-circle-o'></i>Account</a></li>
</ul>
</li>
</ul>
以上是菜单的一部分。
因此,本例中的菜单项仪表板和子菜单项都必须处于活动状态
提前谢谢 试试这个。这是从其他引导管理模板复制的,并针对AdminLTE进行了修改
<script>
$(document).ready(function() {
var url = window.location;
var element = $('ul.sidebar-menu a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
if (element.is('li')) {
element.addClass('active').parent().parent('li').addClass('active')
}
});
</script>
此解决方案适用于子级别菜单。需要JQuery吗
<script type="text/javascript">
$(document).ready(function () {
var url = window.location;
var element = $('ul.sidebar-menu a').filter(function () {
return this.href == url || url.href.indexOf(this.href) == 0;
});
$(element).parentsUntil('ul.sidebar-menu', 'li').addClass('active');
});
</script>
简单地说:
$("ul.sidebar-menu li a[href='"+document.location.pathname+"']").parents('li').addClass('active');
因此,您应该始终检查以确保元素存在,这样就不会出现任何错误,并且可以使用jQuery的数据属性选择器轻松地定位正确的链接
var href = window.location.pathname;
if( $(".sidebar-menu a[href='"+href+"']").length ) {
$(".sidebar-menu a[href='"+href+"']").parent('li').addClass('active');
}
如果您使用的是绝对URL,您可能需要在var中从.pathname切换到.href,并将其放置在何处?它可以仅仅是一个包含的php文件吗?我尝试包含它,并将它放在一个模板中,该模板包含位于body标记底部的菜单等。我还将代码放在脚本标记中。似乎不怎么管用。像个符咒一样管用!谢谢!