Php 导航栏链接不会向单击的导航栏添加活动类
当我点击导航链接时，它会重定向到另一个页面，因为我在Php 导航栏链接不会向单击的导航栏添加活动类,php,jquery,navbar,Php,Jquery,Navbar,当我点击导航链接时，它会重定向到另一个页面，因为我在li a标签中有href，但活动链接仍保留在主页上。例如，如果我单击profile它在Home页面上显示的活动链接，而不是profile或者如果我单击about页面，活动链接仍然在Home页面上。如何根据用户单击的导航栏内容更改活动的链接？如果用户单击profile，则应从home中删除活动配置文件，并将其设置为profile。我怎样才能做到这一点 到目前为止，我一直在尝试： My code: <html> &
li ahrefHomeprofileaboutHome活动的链接？如果用户单击profile
，则应从home
中删除活动配置文件，并将其设置为profile
。我怎样才能做到这一点
到目前为止，我一直在尝试：
My code:
<html>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
echo ' <nav class="navbar navbar-expand-md navbar-dark bg-dark p-4 sticky-top">';
echo '<div class="container-fluid">';
echo ' <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" >';
echo ' <span class="navbar-toggler-icon"></span>';
echo ' </button>';
echo ' <div class="collapse navbar-collapse" id="navbarResponsive">';
echo ' <ul class="navbar-nav ml-auto">';
echo ' <li class="nav-item active">';
echo ' <a href="#" class="nav-link">Home</a>';
echo ' </li>';
echo '<li class="nav-item">';
echo ' <a href="profile.php" class="nav-link">Profile</a>';
echo '</li>';
echo ' <li class="nav-item">';
echo ' <a href="about.php" class="nav-link">About</a>';
echo '</li>';
echo '</div>';
echo ' </div>';
echo ' </nav>';
echo '<script>
$(document).on("click", "ul li",(function(event) {
event.preventDefault();
$(this).addClass("active").siblings().removeClass("active)
});
</script>';
?>
</body>
</html>
我的代码：
只有在单击按钮时，才能设置/删除活动
类
您还需要javascript代码：
- 在页面加载时运行
- 检查当前url
- 从所有导航链接中删除“活动”类
- 然后将“活动”类添加到与当前url匹配的nav链接中
大概是这样的：
$(function() {
let pageName = location.pathname.split('/').slice(-1)[0];
let currentLink = $('.navbar-nav .nav-item a[href="' + pageName + '"]');
if (currentLink) {
$('.navbar-nav .nav-item').removeClass('active');
currentLink.parent().addClass('active');
}
});
只有在单击按钮时，才能设置/删除活动的
类。您还需要在页面加载时运行javascript代码，检查当前url，从所有导航链接中删除“活动”类，然后将“活动”类添加到与当前url匹配的导航链接中。（或者你也可以用php实现）还有，为什么你一次只回显一行原始html？？看起来你根本没有使用任何PHP代码，只是用它来回显html。你可以直接写出html并删除所有php。@WesleySmith如何在页面加载时添加/删除类active
。@WesleySmith我的大部分代码都是php，我在index.php
文件中使用了这个nav
类，这就是为什么我将它设置为php格式。我应该删除php并添加html吗？我添加了一个答案，显示了一个解决方案。对于上面的php，您不必为这个问题更改它，但是您应该理解，不需要重复所有这些行。您没有在该html中使用任何php变量，因此可以将其移到php标记之外，并简单地将其编写为html。这并不是有害的，只是有点毫无意义