Appending 'active' class to bootstrab5 - php

Question

I am working on a project in PHP and I couldn't add ClassActive to the bootstrap Navbar
<?php foreach ($category as $cat){echo <li class="nav-item><a class="nav-link" aria-current="page" href="categories.php?pageid='.$cat['ID'].'">' .$cat['Name']. '</a></li>';}?>
Jquery=>
$('.navbar-nav .nav-item a').click(function(e) {
$('.navbar-nav .nav-item a').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
//e.preventDefault();
});

Answer 1

When you click the link in the navigation, the browser will go to that link. To prevent this, you have the line commented out (e.preventDefault). If the application is not a single page application, you can write a function which will be executed on each page load [$(document).on('load, ()=>{});] where you check for the current URL and add the class .active to the corresponding element.
possible solution here How do I make Bootstrap navbar change active state?
Or like this code from GeeksForGeeks
<script>
/* Code for changing active
link on clicking */
var btns =
$("#navigation .navbar-nav .nav-link");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",
function () {
var current = document
.getElementsByClassName("active");
current[0].className = current[0]
.className.replace(" active", "");
this.className += " active";
});
}
/* Code for changing active
link on Scrolling */
$(window).scroll(function () {
var distance = $(window).scrollTop();
$('.page-section').each(function (i) {
if ($(this).position().top
<= distance + 250) {
$('.navbar-nav a.active')
.removeClass('active');
$('.navbar-nav a').eq(i)
.addClass('active');
}
});
}).scroll();
</script>