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

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>

question from:https://stackoverflow.com/questions/65950952/active-class-not-changing-to-items-for-navbar-in-bootstrap

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.