页面加载菜单栏上的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。 我还增加了循环内的休息，因为我猜你只需要进行每页一个链接活跃