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

Question

我已经建立了一个使用拉威尔..Where管理面板，我有侧栏有多个菜单。我面临的问题是，每当我点击一个菜单时，我想激活那个类，但它不能保持激活状态。

这是我的侧边栏的代码

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

还有我用来激活url的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

你可以用一种简单的方式做到这一点:在每个菜单中添加@ menu，方法如下：

<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 $.To load 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。我还在for循环中添加了一个中断，因为我猜每个页面只需要激活一个链接