I was attempting to emphasize the clicked navbar by adding an active class.
This is the code I tested:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel='icon' type='image/x-icon' href='static/images/logo.png'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="#">[email protected]</a>/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Demo</title>
</head>
<body>
<script>
$(document).ready(function () {
$(".navbar-nav .nav-link").click(function (e) {
e.preventDefault();
$('.nav-item').removeClass('active');
$(this).closest('.nav-item').addClass('active');
});
});
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse flex-grow-1 text-right" id="navNavbar" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
<img style="width: 75px;" src='static/images/logo.png' class="rounded float-left"
alt="logo">
<ul class="navbar-nav ms-auto flex-nowrap">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">check</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/<a href="#">[email protected]</a>/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
</body>
</html>
JQuery code:
<script>
$(document).ready(function () {
$(".navbar-nav .nav-link").click(function (e) {
e.preventDefault();
$('.nav-item').removeClass('active');
$(this).closest('.nav-item').addClass('active');
});
});
</script>
Is there any issue with adding or removing the class?