页面加载菜单栏上的javascript活动类

Question

I have build a admin panel using Laravel ..Where I have side bar having multiple menus.. The problem I'm facing is whenever i click on one of the menu's I want to active that class But it couldn't keep that active.

Here is the code of my sidebar

<div id="sidebar">   
    <ul>
        <li class="submenu"> <a href="#"><i class="icon icon-list"></i> <span>Members</span></a>
            <ul>
              <li class="submenu-2"><a href="{{asset('member/create')}}">Create Member</a></li>          
              <li class="submenu-2"><a href="{{asset('member')}}">Member List</a></li>               
            </ul>
        </li>
        <li class="submenu"> <a href="#"><i class="icon icon-list"></i> <span>Payroll</span></a>
            <ul>
                    <li class="submenu-2"><a href="{{asset('payroll/create')}}">Create Monthly Payroll</a></li>               
                    <li class="submenu-2"><a href="{{asset('managerPayroll')}}">Unapproved Monthly Payroll (Management)</a></li>                           
                    <li class="submenu-2"><a href="{{asset('nonManagerPayroll')}}">Unapproved Monthly Payroll (Employee)</a></li>
                    <li class="submenu-2"><a href="{{asset('printEmployeeAccount')}}">Print Employee Account</a></li>                     
            </ul>
        </li>
        <li class="submenu"> <a href="#"><i class="icon icon-list"></i> <span>Report</span></a>
            <ul>
                    <li class="submenu-2"><a href="{{asset('serachManagerReport')}}">Search Manager Report</a></li> 
                    <li class="submenu-2"><a href="{{asset('serachNonManagerReport')}}">Search Employee Report</a></li>
                    <li class="submenu-2"><a href="{{asset('salaryReport')}}">Salary Sheet </a></li> 
            </ul>
        </li>
        <li class="submenu-2"> <a href="{{asset('changePassword')}}"><i class="icon icon-list"></i> <span>Password Update</span></a>
        </li>
    </ul>

</div> 

And the javascript I've used to make the url as active.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>         
<script>
    (function() {
    var nav = document.getElementById('sidebar'),
        anchor = nav.getElementsByTagName('a'),
        current = window.location.pathname.split('/')[1];
        for (var i = 0; i < anchor.length; i++) {
        if(anchor[i].href == current) {
            anchor[i].className = "active";
        }
    }
})();
</script>

Can anyone suggest what's the Error here please?

Answer 1

You can do this in an easy way : Add @yield in every menu in following way:

<li class="@yield('menu_create_member') submenu-2"><a href="{{asset('member/create')}}">Create Member</a></li>

For Main menu and sub menu try this :

<li class="@yield('menu_member') submenu"> <a href="#"><i class="icon icon-list"></i> <span>Members</span></a>
  <ul>
   <li class="@yield('menu_create_member') submenu-2"><a href="{{asset('member/create')}}">Create Member</a></li>                        
   </ul>
 </li>

Then add this in every page after extending master template (@extends('layouts.master')) when you load

@section('menu_member','active')  // For main menu


@section('menu_create_member','active') // For sub menu

And then automatically active current menu

Answer 2

Like this.use $ .To load jquery.Or you can also use $(document).ready(function(){});

 $(function() { var nav = document.getElementById('sidebar'), anchor = nav.getElementsByTagName('a'), current = window.location.pathname.split('/')[1]; for (var i = 0; i < anchor.length; i++) { if(anchor[i].href == current) { anchor[i].className = "active"; } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sidebar"> <ul> <li class="submenu"> <a href="#"><i class="icon icon-list"></i> <span>Members</span></a> <ul> <li class="submenu-2"><a href="{{asset('member/create')}}">Create Member</a></li> <li class="submenu-2"><a href="{{asset('member')}}">Member List</a></li> </ul> </li> <li class="submenu"> <a href="#"><i class="icon icon-list"></i> <span>Payroll</span></a> <ul> <li class="submenu-2"><a href="{{asset('payroll/create')}}">Create Monthly Payroll</a></li> <li class="submenu-2"><a href="{{asset('managerPayroll')}}">Unapproved Monthly Payroll (Management)</a></li> <li class="submenu-2"><a href="{{asset('nonManagerPayroll')}}">Unapproved Monthly Payroll (Employee)</a></li> <li class="submenu-2"><a href="{{asset('printEmployeeAccount')}}">Print Employee Account</a></li> </ul> </li> <li class="submenu"> <a href="#"><i class="icon icon-list"></i> <span>Report</span></a> <ul> <li class="submenu-2"><a href="{{asset('serachManagerReport')}}">Search Manager Report</a></li> <li class="submenu-2"><a href="{{asset('serachNonManagerReport')}}">Search Employee Report</a></li> <li class="submenu-2"><a href="{{asset('salaryReport')}}">Salary Sheet </a></li> </ul> </li> <li class="submenu-2"> <a href="{{asset('changePassword')}}"><i class="icon icon-list"></i> <span>Password Update</span></a> </li> </ul> </div> 

Answer 3

By wrapping your code inside parentheses you are not calling the function inside.

(function() {
    var nav = document.getElementById('sidebar'),
        anchor = nav.getElementsByTagName('a'),
        current = window.location.pathname.split('/')[1];

    for (var i = 0; i < anchor.length; i++) {
        if(anchor[i].href == current) {
            anchor[i].className = "active";
            break;
        }
    }
}) (); // Add 2 parentheses to call the anonymous function

PS. I also added a break inside the for loop, since i guess you only need to make one link active per page