我使用 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>
任何人都可以建议这里的错误是什么吗?
您可以通过简单的方式执行此操作:按以下方式在每个菜单中添加@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
然后自动激活当前菜单
像这样$
。加载 jquery。或者您也可以使用$(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>
通过将代码包装在括号中,您不会在里面调用函数。
(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
附言。我还在 for 循环中添加了一个中断,因为我想你只需要让每页激活一个链接