Active class not changing to items for navbar in bootstrap - html

Question

I have this navbar from bootstrap which is supposed to add active class on nav-item or on anchor element on click, but while inspecting it in browser its not changing states, I don't understand why.
.nav-link {
color: #FFF;
width: 100%;
height: 100%;
text-transform: uppercase;
}
.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: green;
transition: width .3s;
}
.nav-link:hover::after {
width: 100%;
}
.navbar-nav>.active>a {
color: #00cc00;
}
<nav class="navbar navbar-expand-lg navbar-dark " style="background-color: black;">
<div class="container-fluid">
<a class="navbar-brand d-lg-none" href="#"><img src="../assets/images/howdy-white.png" style="width:45px; height:45px;" /></a>
<button class="navbar-toggler shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand d-none d-lg-block" href="#"><img src="../assets/images/howdy-white.png" style="width:45px; height:45px;" /></a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">services</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

You need add some javascript event handler while you click that link will do some action.
example if you using jQuery with that navbar structure like you shown
$("ul.navbar-nav li").on("click", function() {
$("ul.navbar-nav li").removeClass("active");
$(this).addClass("active")
})
or if you like using vanilla javascript with DOM query SelectorAll
let navbarLink = document.querySelectorAll(".navbar-nav li")
document.addEventListener("click", function(e) {
for (let x = 0;x < navbarLink.length;x++) {
navbarLink[x].classList.remove("active")
}
e.target.closest("li").classList.add("active")
})
hope this work on your case.

Answer 2

You suppose to add active class on anchor tag