菜单活动当前页面

Question

我正在使用bootstrap（adminlte），我想让当前页面的菜单项活动。问题是，我不知道该怎么做。我确实有一些解决方案（除了在每个PHP文件中更改它），例如为每个链接提供一个IF语句，这将是一个可怕的解决方案（我认为）。

      <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>

以上是菜单的一部分。因此，菜单项（在这种情况下为仪表板）和sub-menu项目都必须变得活跃。

预先感谢！

Answer 1

尝试一下。这是从其他Bootstrap管理模板中复制的，并修改为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>

Answer 2

此解决方案与Sublevel菜单一起使用。需要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>

Answer 3

在一条简单的行中：

$("ul.sidebar-menu li a[href='"+document.location.pathname+"']").parents('li').addClass('active');

Answer 4

因此，您应该始终检查以确保存在该元素，以免出现任何错误，并且可以用户用户的数据属性选择器来轻松定位正确的链接。

var href = window.location.pathname;
if( $(".sidebar-menu a[href='"+href+"']").length ) {
    $(".sidebar-menu a[href='"+href+"']").parent('li').addClass('active');
}

如果您使用的是绝对URL，则可能需要从.pathName切换到var