La función onclick en la función JavaScript no funciona. Necesitamos la página onclick para agregar la clase activa y eliminar la clase activa anterior.

Todas mis páginas provienen de la base de datos, no se agregaron manualmente. Las páginas se agregan solo desde el panel de administración. ¡Usamos 2 códigos javascript pero no funcionan de la misma manera!

 //javascript 1. $(document).ready(function() { $("#header-page li a").on("click", function() { $("#header-page li a").removeClass('active'); $(this).toggleClass("active"); }); }); 2. // Header Pages Active $('#header-page li a').on('click', function () { $("#header-page li a").removeClass('active'); $(this).toggleClass('active'); }); //code <div class="collapse navbar-collapse" id="navbarCollapse"> <div class="navbar-nav ms-auto p-4 p-lg-0"> <div class="header" id="header-page"> <li> <a class="active" href="index.php"></a> </li> <?php $id=$_GET['id']; $qry="SELECT * FROM tbl_menu where visibility_status=0 order by position_order ASC "; $result=mysqli_query($connectiondb,$qry); while($row=mysqli_fetch_array($result)) { ?> <li><a class="mx-2 nav-item nav-link" href="<?php if($page_status=='true')?> <?php echo $row['page_link'];?>?id=<?php echo $row['id']; ?>"><?php echo $row['page_name'];?></a></li> <?php } ?> </div> </div> </div> ///css /*** Headers Active Pags***/ #header-page li { display: inline-block; font-weight: 500; color: var(--dark); cursor: pointer; transition: .5s; border-bottom: 5px solid transparent; } #header-page li:hover, #header-page li a.active { color: var(--primary); border-color: var(--primary); }