JavaScript函数中的onclick函数不起作用。我们需要一个点击页面来添加活动类和删除以前的活动类。
我所有的页面都来自数据库，他们没有手动添加。页面只能从管理面板添加。我们使用2个javascript代码，但他们的工作方式不一样!!!!
//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);
}
我认为你瞄准HTML元素的方式有问题，我建议你为你的锚使用类，然后一切都很好:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>test2</title>
<script type="text/javascript" src="/jquery-3.2.1.min.js"></script>
<style type="text/css">
#header-page li {
display: inline-block;
font-weight: 500;
color: #444;
cursor: pointer;
transition: .5s;
border-bottom: 5px solid transparent;
}
#header-page li:hover,
#header-page li a.active {
color: #00ff00;
border-color: #00ff00;
}
</style>
</head>
<body>
<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 nav-link" href="#">index</a> </li>
<li><a class="mx-2 nav-item nav-link" href="#">test 1</a></li>
<li><a class="mx-2 nav-item nav-link" href="#">test 2</a></li>
<li><a class="mx-2 nav-item nav-link" href="#">test 3</a></li>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".nav-link").on('click', function () {
$(".nav-link").removeClass('active');
$(this).addClass("active");
});
})
</script>
</body>
</html>