Javascript 导航栏活动类在引导程序4中不工作
我正在尝试将活动类添加到导航栏中当前打开的链接。我在谷歌上搜索了很多。在Stack Overflow和answers中有许多类似于此问题的问题和答案，但这些答案仅适用于navbar的哈希类型，如Javascript 导航栏活动类在引导程序4中不工作,javascript,jquery,twitter-bootstrap,bootstrap-4,dom-events,Javascript,Jquery,Twitter Bootstrap,Bootstrap 4,Dom Events,我正在尝试将活动类添加到导航栏中当前打开的链接。我在谷歌上搜索了很多。在Stack Overflow和answers中有许多类似于此问题的问题和答案，但这些答案仅适用于navbar的哈希类型，如href=“#”，当我有网站和页面时，这些答案不起作用。我想正确地添加活动类。我试了很多，但没有找到完美的答案 这是我的代码： <nav class="navbar navbar-expand-md navbar-dark sticky-top pt-0 pb-0"> <div
href=“#”<nav class="navbar navbar-expand-md navbar-dark sticky-top pt-0 pb-0">
<div class="container nav_container">
<a class="navbar-brand" href="<?php echo BASE_URL; ?>">
<img src="<?php echo BASE_URL; ?>/resources/assets/img/logo/logo_default.png" class="img-fluid foodbox_logo">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="<?php echo BASE_URL; ?>">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/shop.php">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/cart.php">Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/about-us.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/contact-us.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function() {
$('a.nav-link').on('click', '.nav-item a', function (e) {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
</script>
-
-
-
-
-
<nav class="navbar navbar-expand-md navbar-dark sticky-top pt-0 pb-0">
<div class="container nav_container">
<a class="navbar-brand" href="<?php echo BASE_URL; ?>">
<img src="<?php echo BASE_URL; ?>/resources/assets/img/logo/logo_default.png" class="img-fluid foodbox_logo">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="<?php echo BASE_URL; ?>">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/shop.php">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/cart.php">Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/about-us.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/contact-us.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<script>
$(document).ready(function() {
$('a.nav-link').on('click', '.nav-item a', function (e) {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
</script>
$（文档）.ready（函数（）{
$（'a.nav-link'）。在（'click'，'nav项目a'，函数（e）{
$（this）.parent（）.addClass（'active'）.sides（）.removeClass（'active'）；
});
});
有人能帮我吗 您可以尝试下面的代码
$(document).ready(function() {
$('.nav-link').on('click', '.nav-item a', function (e) {
$('.navbar-nav .nav-link').find(".active").removeClass("active");
$(this).parent().addClass('active');
});
});
您可以尝试下面的代码
$(document).ready(function() {
$('.nav-link').on('click', '.nav-item a', function (e) {
$('.navbar-nav .nav-link').find(".active").removeClass("active");
$(this).parent().addClass('active');
});
});
jQuery的定义不正确。在您的代码中，它试图在
a.nav-linknav项目aa.nav-link$（文档）.ready（函数（）{
/*
暂时禁用超链接以查看菜单工作
*/
$（'a'）.attr（“href”，“#”）；
$（'a.nav-link'）。在（'click'，函数（e）上{
$（this）.parent（）.addClass（'active'）.sides（）.removeClass（'active'）；
});
});
nav{
背景色：红色；
}
-
-
-
-
-
jQuery的定义不正确。在您的代码中，它试图在a.nav-link
内找到nav项目a
，但找不到任何项目。只需监视a.nav-link的点击a.nav-link
。详情请参阅
$（文档）.ready（函数（）{
/*
暂时禁用超链接以查看菜单工作
*/
$（'a'）.attr（“href”，“#”）；
$（'a.nav-link'）。在（'click'，函数（e）上{
$（this）.parent（）.addClass（'active'）.sides（）.removeClass（'active'）；
});
});
nav{
背景色：红色；
}
-
-
-
-
-
我已经测试了这段代码，它正在运行。我把你的选择器改了一点。试一试，看看它是否适合你。当您只需使用下面的选择器访问导航中的每个锚点时，向每个锚点添加导航链接类是多余的
然后我遍历了导航锚，删除了活动类，并将活动添加到单击的项目中
$(document).ready(function() {
$(".navbar-nav li a").on('click', function (e) {
$(".navbar-nav li").find('a').removeClass('active');
$(this).addClass('active');
});
});
我已经测试了这段代码，它正在工作。我把你的选择器改了一点。试一试，看看它是否适合你。当您只需使用下面的选择器访问导航中的每个锚点时，向每个锚点添加导航链接类是多余的
然后我遍历了导航锚，删除了活动类，并将活动添加到单击的项目中
$(document).ready(function() {
$(".navbar-nav li a").on('click', function (e) {
$(".navbar-nav li").find('a').removeClass('active');
$(this).addClass('active');
});
});
使用下面的代码段，并在导航栏的url末尾添加/
$(document).ready(function() {
var url = [location.protocol, '//', location.host, location.pathname].join('');
$('.nav-item.active').removeClass('active');
$('.nav-item a[href="' + url + '"]').parent().addClass('active');
$(this).parent().addClass('active').siblings().removeClass('active');
});
使用下面的代码段，并在导航栏的url末尾添加/
$(document).ready(function() {
var url = [location.protocol, '//', location.host, location.pathname].join('');
$('.nav-item.active').removeClass('active');
$('.nav-item a[href="' + url + '"]').parent().addClass('active');
$(this).parent().addClass('active').siblings().removeClass('active');
});
你在代码中的什么地方检查当前的url/路径？我如何检查？@Zim你能帮我吗？你在代码中的什么地方检查当前的url/路径？我如何检查？@Zim你能帮我吗？兄弟，我已经看过这个代码并尝试过了。它仅适用于散列类型的链接href=“#”
单页网站。但我有多页。它不起作用参考Broter，我已经检查过了。他们都不工作。它们都是针对单页网站的，比如href=“#”
Brother，我已经看过这些代码并尝试过了。它仅适用于散列类型的链接href=“#”
单页网站。但我有多页。它不起作用参考Broter，我已经检查过了。他们都不工作。它们都是针对像href=“#”
@ZainShabir这样的单页网站的，我已经将其更改为一个工作示例Brother，它仅用于哈希类型的链接href=“#”
。我不需要这个。我已经在问题中提到我有多页。我需要它properly@ZainShabir我已将其更改为一个工作示例Brother，它仅适用于哈希类型的链接href=“#”
。我不需要这个。我已经在问题中提到我有多页。我需要正确地处理它，但我想将活动类添加到.nav link
而不是.nav item
。总之，我自定义了它，并且工作得很好。非常感谢兄弟们，但为什么要用“/”，我的意思是它现在在本地主机上，但是在2到3天后我们就要启动它了，而域主页上不能有“/”，那么我该怎么办呢？工作了，但我想把活动类添加到.nav link
而不是.nav item
。总之，我定制了它，工作得很好。非常感谢兄弟们，但为什么要用“/”呢？我的意思是，它现在在本地主机上，但两三天后我们就要启动它了，而域名主页上不能有“/”，我该怎么办呢