I am using header file to control the navigation i need to show the active link name with another colour when i click on an a tag i tried adding a:class but it didn't work.
This is my header file
<!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">☰</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>
Pass menu name which you want to active when you redirect to view e.g when you click on 'Chart of accounts' pass like this from controller
Update this line, pass menu 'chartofaccounts'
In header, active menu like this
Add CSS for active class as per your theme