我的脚本标签中包含以下内容。但是，每当我单击test.php或test2.php li链接时，都不会重定向到相应页面。
但是，活动类从index.php文件更改为test.php或test2.php文件，具体取决于单击了哪个链接，但我没有定向到该页面。我尝试了以下链接中的解决方案，但现在它们产生了所需的期望结果，即将我重定向到所单击的页面，并将活动类更新为li元素。
How to change active class while click to another link in bootstrap use jquery?
Active link after click
每当我取消注释此行e.preventDefault（）时，我都可以导航到已单击的链接，但活动类不会更新为
li elememnt单击了，但是当对上述行进行注释时，我无法导航到单击的页面，而是在单击的li元素上更新了活动类。
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="active">
<a href="index.php">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li class="">
<a href="test.php">
<i class="material-icons">group</i>
<span>Test</span>
</a>
</li>
<li class="">
<a href="test2.php">
<i class="material-icons">people</i>
<span>Test2</span>
</a>
</li>
</ul>
</div>
和
script代码：$(document).ready(function () {
$('.menu .list a').click(function(e) {
$('.menu li.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
});
test.php的内容如下：
<body class="theme-red">
<nav class="navbar">
<?php include_once('navbar.html'); ?>
</nav>
<section>
<aside id="leftsidebar" class="sidebar">
<?php include_once('left-side-bar.html');?>
</aside>
</section>
<section class="content">
<div class="container-fluid">
<div class="row clearfix">
<table id="tbl-users" class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</tfoot>
<tbody>
<?php
$accounts = get_details();
foreach($accounts as $acc){
?>
<tr>
<td><?php echo $acc['id']; ?></td>
<td><?php echo $acc['name']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</section>
</body>
最佳答案
为什么会出现问题？
出现的问题是，当您点击e.preventDefault()
定位标记the default behaviour is to redirect the page就是
为什么页面无法加载，但为何active class gets added。但当
您don't use e.preventDefault()，page redirects立即
以及您did happen but before it was redirected而不是
对于新页面（可以重定向到当前页面或其他页面），这就是为什么can't see the class active添加到
它。
。
如何解决该问题？
好吧，有两种方法可以解决这个问题。我会说
test.php或test2.php return a value，您可以针对validate
if-else conditions的javascript，如果该值与您匹配
那李班活跃。
这是您需要进行的更改：
在您已超链接的每个页面上添加跨度，即在定位标记中的test.php，test2.php等having text the same as your hyperlink，因此对于test.php，将跨度添加为：
<span id="curpage" style="display:none;">test.php</span>
然后，在body标签的末尾添加一个脚本（您可以使用
<?php include(".."); ?>将脚本添加到一个单独的文件中，并将其包含在所有php文件中：$('a[href=\"' + $("#curpage").text() + '\"]').parent().addClass("active");
这是一个示例代码，您可以尝试实现。放入2个档案
与a.html相同的目录，具有以下代码：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<span id="curpage" style="display:none;">a.html</span>
<div class="menu">
<li><a href="b.html">1</a></li>
<li><a href="a.html">2</a></li>
</div>
<script>
$('a[href=\"' + $("#curpage").text() + '\"]').parent().css("color","red");
</script>
</body>
</html>
b.html具有以下代码：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<span id="curpage" style="display:none;">b.html</span>
<div class="menu">
<li><a href="b.html">1</a></li>
<li><a href="a.html">2</a></li>
</div>
<script>
$('a[href=\"' + $("#curpage").text() + '\"]').parent().css("color","red");
</script>
</body>
</html>
现在，当您通过单击链接更改页面时，可以看到
子弹的颜色如何变化。