頁面加載菜單欄上的JavaScript活動類

Question

我使用Laravel構建了一個管理面板..在哪裏有側欄有多個菜單.. 我面對的問題是每當我點擊菜單中的一個時我想積極的類但它不能保持活躍。

這裏是我的側邊欄

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

而且我用來做網址爲活動的JavaScript代碼。

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

任何人都可以建議什麼是錯誤嗎？

Answer 1

可以在一個簡單的方法做到這一點： 在每一個菜單中選擇Add @yield以下列方式：

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

對於主菜單和子菜單試試這個：

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

在每一個頁面然後添加這個擴展主模板(@extends('layouts.master'))後，當您加載

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


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

，然後自動有功電流菜單

Answer 2

像this.use $。要負載jquery.Or你也可以使用$(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

通過包裝你的代碼括號內你是不是調用內部的功能。

(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。 我還增加了循環內的休息，因爲我猜你只需要進行每頁一個鏈接活躍