Menu active current page

Question

I'm using Bootstrap (AdminLTE) and I want to make the current page's menu item active. Problem is, I don't know how to do it. I do have a few solutions in mind (besides changing it in every php file), like putting an IF statement for every link, which would be a terrible solution (I think).

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

The above is part of the menu. So the menu item (in this case Dashboard) and sub-menu item both have to become active.

Thanks in advance!

Answer 1

Try this. This was copied from other bootstrap admin template and modified for 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

This solution work with sublevel menu. Need 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

So you should always check to make sure the element exists so you don't get any errors and you can user jQuery's data attribute selector to easily target the correct links.

var href = window.location.pathname;

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

If you are using absolute urls you may need to switch from .pathname to .href in the var

Answer 5

  *****Answer***
     Hi, I'm using this code to add active class depending of the page.
     This is working ok except for multi level submenus any clue how to fix this**
     /** add active class and stay opened when selected */
     var url = window.location;
     // for sidebar menu entirely but not cover treeview
     $('ul.sidebar-menu a').filter(function() {
     return this.href == url;
     }).parent().addClass('active');
     // for treeview
     $('ul.treeview-menu a').filter(function() {
     return this.href == url;
     }).closest('.treeview').addClass('active');

         **HTML**
     <li class="treeview">
        <a href="#">
        <i class="fa fa-gears"></i>
        <span>Settings</span>
        <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="treeview-menu">
           <li>
              <a href="#">
              <i class="fa fa-bars"></i>
              Specials Settings
              </a>
              <ul class="treeview-menu">
                 <li><a href="setting1.php">Setting 1</a></li>
              </ul>
           </li>
        </ul>
     </li>