需要从头文件中将选定的标记显示为活动标记

Question

我正在使用头文件来控制导航我需要在单击标签时用另一种颜色显示活动的 link 名称我尝试添加 a:class 但它不起作用.

这是我的头文件

<!DOCTYPE html>
                <html lang="en">

                <head>

                <link rel="stylesheet" href="{{asset('css/material.min.css')}}">

                <link rel="stylesheet" href="{{asset('css/w3.css')}}">
                <link rel="stylesheet" href="{{asset('font-awesome-4.7.0/css/font-awesome.min.css')}}">
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" href="{{asset('css/bootstrap-select.min.css')}}">
                <title>Laravel</title>

                <!-- Fonts -->
                <link rel="stylesheet" href="{{asset('roboto/family=Roboto:300,400,500,700')}}" type="text/css">


                <!-- Styles -->

               </head>
                <body onload="w3_open();">
            <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->

            <nav class="w3-sidenav w3-card-2" style="display:none; margin-right:20%; width:15%" id="mySidenav">
                <a href="javascript:void(0)"
                   onclick="w3_close()"
                   class="w3-x-large w3-grey"><i class="fa fa-times" aria-hidden="true"></i> </a>



                <div class="w3-accordion">

                    <a onclick="myAccFunca()">Lists    <i class="fa fa-caret-down carret-d" id="carret-d"></i><i
                                class="fa fa-caret-up carret-d" id="carret-u" style="visibility: hidden"></i></a>

                    <div id="demoAcca" class="w3-accordion-content w3-white w3-card-4">
                        <ul class="breadcrumb">
                            <a href="{{route('runpayroll.chartofaccounts')}}"><i class="fa fa-line-chart" aria-hidden="true"></i>
                                Chart of
                                accounts</a>
                            <a href="{{route('runpayroll.leavecategory')}}">Leave Categories</a>
                            <a href="{{route('runpayroll.employeecategories')}}">Employee Categories</a>
                            <a href="{{route('payrollcategories.alldepartments')}}"><i class="fa fa-line-chart"
                                                                                       aria-hidden="true"></i>Departments</a>
                        </ul>
                    </div>
                </div>
                <hr>
                <a href="{{route('employeelist')}}">Employee List</a>
                <hr>
                <div class="w3-accordion">
                    <a onclick="myAccFuncb()" href="#">Payroll Categories  <i class="fa fa-caret-down carret-d" id="carret-do"></i><i class="fa fa-caret-up" id="carret-up" style="visibility: hidden"></i></a>

                    <div id="demoAccb" class="w3-accordion-content w3-white w3-card-4">
                        <ul>
                            <a href="{{route('payrollcategories.salariesandwages')}}">Salaries and Wages</a>
                            <a href="{{route('payrollcategories.allowanceandbenifits')}}">Allowance and Benefits</a>
                            <a href="{{route('payrollcategories.epfandetf')}}">Contributions</a>
                            <a href="{{route('payrollcategories.tax')}}">Tax</a>
                        </ul>
                    </div>
                </div>
                <hr>
                <div class="w3-accordion">
                    <a onclick="myAccFuncd()" href="#">Leave Management  <i class="fa fa-caret-down carret-d" id="carret-down"></i><i class="fa fa-caret-up" id="carret-uppp" style="visibility: hidden"></i></a>

                    <div id="demoAccd" class="w3-accordion-content w3-white w3-card-4">
                        <ul id="downm">
                            <a href="{{route('leavecategoires.add_leave_entitlements')}}">Leave Entitlements</a>
                            <a href="{{route('leavecategoires.leavestatus')}}">Leave Status</a>
                            <a href="#">Pending Approvals</a>
                            <a href="{{route('leavecategoires.addleave')}}">Add New Leave</a>

                        </ul>
                    </div>
                </div>
                <hr>
                <a href="#">Time Sheet</a>
                <hr>

                <div class="w3-accordion">
                    <a onclick="myAccFuncc()" href="#">Reports  <i class="fa fa-caret-down carret-d" id="carret-dow"></i><i class="fa fa-caret-up" id="carret-upp" style="visibility: hidden"></i></a>
                    <div id="demoAccc" class="w3-accordion-content w3-white w3-card-4">
                        <ul>
                            <a href="#">Employee List</a>
                            <a href="#">Attendance</a>
                            <a href="#">Payroll Summery</a>
                            <a href="#">EPF C Form</a>
                            <a href="#">EPF R Form</a>
                            <a href="#">Payee Annual Summery</a>
                            <a href="#">Payee T-10</a>
                            <a href="#"> Comparison-List Salary Behavior</a>
                            <a href="#">Bank Summery</a>
                        </ul>
                    </div>
                </div>
                <hr>
                <div class="w3-accordion">
                    <a onclick="myAccFunccomp()" href="#">Company  <i class="fa fa-caret-down carret-d" id="carret-docomp"></i><i class="fa fa-caret-up" id="carret-upcomp" style="visibility: hidden"></i></a>
                    <div id="demoAccomp" class="w3-accordion-content w3-white w3-card-4">
                        <ul>
                            <a href="{{route('company.info')}}">Info</a>
                            <a href="#">Bank Account</a>
                            <a href="#">User Slip</a>
                        </ul>
                    </div>
                </div>
                <hr>
                <a href="#">addnew</a>

                </div>
            </nav>

            <div id="main">

                <header class="w3-container w3-theme-d3">
                    <span class="w3-opennav-content w3-xlarge" onclick="w3_open()" id="openNav">&#9776;</span>
                    <h1>Payroll</h1>
                </header>
                <ul class="w3-navbar w3-dropnav w3-topnav w3-theme w3-large    w3-border w3-center">
                    <li><a class="w3-theme" href="#"><i class="fa fa-home"></i></a></li>
                    <li><a href="#"><i class="fa fa-search"></i></a></li>
                    <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                    <li><a href="#"><i class="fa fa-globe"></i></a></li>
                    <li><a href="#"><i class="fa fa-sign-in"></i></a></li>
                    <li><input type="text" class="w3-input" placeholder="Search.."></li>
                    <li>
                        <button class="w3-btn w3-green">Go</button>
                    </li>
                </ul>

            </div>


            </body>

            <script>
                function w3_open() {
                    document.getElementById("main").style.marginLeft = "15%";
                    document.getElementById("mySidenav").style.width = "15%";
                    document.getElementById("mySidenav").style.display = "block";
                    document.getElementById("footer").style.marginLeft = "15%";
                    document.getElementById("openNav").style.display = 'none';
                }
                function w3_close() {
                    document.getElementById("main").style.marginLeft = "0%";
                    document.getElementById("footer").style.marginLeft = "0%";
                    document.getElementById("mySidenav").style.display = "none";
                    document.getElementById("openNav").style.display = "inline-block";
                }


                function myAccFunca() {
                    var x = document.getElementById("demoAcca");
                    var y = document.getElementById("carret-u");
                    var z = document.getElementById("carret-d");
                    if (x.className.indexOf("w3-show") == -1) {
                        x.className += " w3-show";
                            x.previousElementSibling.className += " w3-cyan";
                        y.style.visibility="visible";
                        z.style.visibility="hidden";

                    } else {
                        x.className = x.className.replace(" w3-show", "");
                        x.previousElementSibling.className =
                            x.previousElementSibling.className.replace(" w3-cyan", "");
                        y.style.visibility="hidden";
                        z.style.visibility="visible";
                    }
                }
                function myAccFuncb() {
                    var x = document.getElementById("demoAccb");
                    var y = document.getElementById("carret-up");
                    var z = document.getElementById("carret-do");
                    if (x.className.indexOf("w3-show") == -1) {
                        x.className += " w3-show";
                        x.previousElementSibling.className += " w3-cyan";
                        y.style.visibility="visible";
                        z.style.visibility="hidden";
                    } else {
                        x.className = x.className.replace(" w3-show", "");
                        x.previousElementSibling.className =
                            x.previousElementSibling.className.replace(" w3-cyan", "");
                        y.style.visibility="hidden";
                        z.style.visibility="visible";
                    }
                }
                function myAccFuncc() {
                    var x = document.getElementById("demoAccc");
                    var y = document.getElementById("carret-upp");
                    var z = document.getElementById("carret-dow");
                    if (x.className.indexOf("w3-show") == -1) {
                        x.className += " w3-show";
                        x.previousElementSibling.className += " w3-cyan";
                        y.style.visibility="visible";
                        z.style.visibility="hidden";

                    } else {
                        x.className = x.className.replace(" w3-show", "");
                        x.previousElementSibling.className =
                            x.previousElementSibling.className.replace(" w3-cyan", "");
                        y.style.visibility="hidden";
                        z.style.visibility="visible";
                    }
                }
                function myAccFuncd() {
                    var x = document.getElementById("demoAccd");
                    var y = document.getElementById("carret-uppp");
                    var z = document.getElementById("carret-down");
                    if (x.className.indexOf("w3-show") == -1) {
                        x.className += " w3-show";
                        x.previousElementSibling.className += " w3-cyan";
                        y.style.visibility="visible";
                        z.style.visibility="hidden";

                    } else {
                        x.className = x.className.replace(" w3-show", "");
                        x.previousElementSibling.className =
                            x.previousElementSibling.className.replace(" w3-cyan", "");
                        y.style.visibility="hidden";
                        z.style.visibility="visible";
                    }
                }
                function myAccFunccomp() {
                    var x = document.getElementById("demoAccomp");
                    var y = document.getElementById("carret-upcomp");
                    var z = document.getElementById("carret-docomp");
                    if (x.className.indexOf("w3-show") == -1) {
                        x.className += " w3-show";
                        x.previousElementSibling.className += " w3-cyan";
                        y.style.visibility="visible";
                        z.style.visibility="hidden";

                    } else {
                        x.className = x.className.replace(" w3-show", "");
                        x.previousElementSibling.className =
                            x.previousElementSibling.className.replace(" w3-cyan", "");
                        y.style.visibility="hidden";
                        z.style.visibility="visible";
                    }
                }

                $(function(){
                    $page = jQuery.url.attr("file");
                    if(!$page) {
                        $page = '{{route('main.home')}}';
                    }
                    $('#test ul a').each(function(){
                        var $href = $(this).attr('href');
                        if ( ($href == $page) || ($href == '') ) {
                            $(this).addClass('on');
                        } else {
                            $(this).removeClass('on');
                        }
                    });
                });

            </script>
            <!--Load the AJAX API-->
            <script type="text/javascript" src="js/loader.js"></script>
            <script src="{{asset('js/material.min.js')}}"></script>
            <script src="{{asset('js/Chart.bundle.min.js')}}"></script>
            </html>

Screenshot of w3.css sidenav

Answer 1

传递重定向查看时要激活的菜单名称例如，当您单击 'Chart of accounts' 从控制器

像这样传递

更新这一行，通过菜单'chartofaccounts'

return view('chartofaccounts')->with('data', $data)->with('menu', 'chartofaccounts');

在页眉中，这样的活动菜单

<a href="{{route('runpayroll.chartofaccounts')}}" class="<?php if(isset($menu) && $menu == 'chartofaccounts') { echo 'active'; } ?>"><i class="fa fa-line-chart" aria-hidden="true"></i>
Chart of accounts</a>
<a href="{{route('runpayroll.leavecategory')}}" class="<?php if(isset($menu) && $menu == 'leavecategory') { echo 'active'; } ?>">Leave Categories</a>

根据您的主题添加 CSS 以激活 class

.active {
  border: solid 1px #eee;
  background-color: #eee;
}

需要从头文件中将选定的标记显示为活动标记

Need to show the selected a tag as active from header file

navigation

laravel

w3.css