用于更改活动类的 jquery 不起作用

Posted

技术标签:

【中文标题】用于更改活动类的 jquery 不起作用【英文标题】：jquery for changing active class not working 【发布时间】：2019-02-20 02:27:30 【问题描述】：

我已经在这里寻找答案，但没有一个适合我的具体问题。

我有一个 Bootstrap 4 导航栏，我需要更改单击的菜单项的活动类。默认情况下，我的主页链接处于活动状态。但是当我点击另一个链接时，什么也没有发生。当我再次单击它时，如果找到并删除了活动类，但活动类不会添加到我单击的项目中，并且活动类会回到主页链接。

我的导航栏的相关部分：

$(document).ready(function() 
  $('.nav-link').on('click', function() 
    $('.navbar-nav').find('.active').removeClass('active');
    $(this).addClass('active');
  );
);
.active  color: red 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar-nav">
  <li class="nav-item">
    <a id="homelink" class="nav-link active" href="index.php">Home<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a id="aboutlink" class="nav-link" href="about.php">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Portfolio</a>
  </li>
</ul>

【问题讨论】：

当您单击链接时，它会导航到其href 属性（index.php、about.php 或#）中的页面。当它这样做时，不会运行其他代码。 【参考方案1】：

我已经使用 bootstrap 为 bootstrap 4 推荐的 cdn 版本（jquery.js、popper.js、bootstrap.js）运行了您的代码，并且一切似乎都很好。尝试将这些版本更改为推荐的版本官方引导页面https://getbootstrap.com/docs/4.1/getting-started/introduction/

【讨论】：

【参考方案2】：

这工作正常。 检查这些文件是否在正确的位置：

jquery.min.js - 版本 3.3.1

bootstrap.min.js - 版本 4.1.3

popper.min.js - 版本 1.14.3

bootstrap.min.css - 版本 4.1.3

$(document).ready(function() 
 $('.nav-link').on('click', function()
  $('.navbar-nav').find('.active').removeClass('active');
  $(this).addClass('active');
 );
);
.active
  background-color:grey;
  color:black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<html>
<head>

</head>
<body>
  <ul class="navbar-nav">
  <li class="nav-item">
    <a id="homelink" class="nav-link active" href="#">Home<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a id="aboutlink" class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Portfolio</a>
  </li>
</ul>

</body>
</html>

【讨论】：

抱歉，没有任何效果。 Zadiki，我完全复制了您的代码并在测试文件中运行它，它运行良好。然后我将代码复制到我现有的页面中，它的行为与以前完全一样。恢复到默认的活动链接。我什至拿出了我所有的 CSS，除了活动课程。没有运气。

以上是关于用于更改活动类的 jquery 不起作用的主要内容，如果未能解决你的问题，请参考以下文章

用于更改 href 的 JQuery 脚本不起作用

jQuery 直播活动在 iPhone 4 中不起作用？

以编程方式更改活动主题不起作用[重复]

当我放一个 href 时，jQuery 导航栏中的活动类不起作用

jQuery + One Page Scroll 插件：检查元素 hasClass 是不是不起作用

在gridview页面更改后Jquery colorbox不起作用