Switching 'Active' Class on Li Item Not Working When 'Href' Value Set to Any Link
I Created a Navigation Menu for My Website Which Has Some Styles on Active Page Link, My Code Works Fine Until I Add Any Redirecting Link to "Href" Attribute...
I created a Navigation menu for my website which has some styles on active page link, my code works fine until I add any redirecting link to "href" attribute of the 'a' tag, and when I set "href" value to '#' everything works fine.
Below is my HTML,CSS and JS code for the navigation menu.
$(document).ready(function(){
$('.navbar ul li').on('click',function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
})
}).navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: Georgia, serif;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 13px;
font-weight: 400;
color: rgb(0, 0, 0);
white-space: nowrap;
transition: 0.3s;
text-decoration:none;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active>a,
.navbar .active:focus,
.navbar li:hover>a {
color: green;
text-decoration: underline;
}<script src=""></script>
<nav id="navbar" class="navbar">
<ul>
<li class="active"><a href="index.php" >Home</a></li>
<li><a href="workflow.php">Work flow</a>
<li><a href="illustration.php">Illustration</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav><!-- .navbar -->1 Answer
I solved the issue my self, below is the code for same:
<nav id="navbar" class="navbar">
<ul>
<li class="<?php if ($page=='home') {echo "active";} ?>"><a href="index.php" >Home</a></li>
<li class="<?php if ($page=='workflow') {echo "active";} ?>"><a href="workflow.php">Work flow</a>
<li class="<?php if ($page=='illustration') {echo "active";} ?>"><a href="illustration.php">Illustration</a></li>
<li class="<?php if ($page=='about') {echo "active";} ?>"><a href="about.php">About</a></li>
<li class="<?php if ($page=='contact') {echo "active";} ?>"><a href="contact.php">Contact</a></li>
</ul>
</nav><!-- .navbar -->
This is the Html I modified added If else condition in class attribute. And also added below line on each page on which the links are being redirected.
<?php
$page = 'home';
?>
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
