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>