文章/答案/技术大牛

发布

社区首页 >问答首页 >更改活动类不起作用的jquery

问更改活动类不起作用的jquery
EN

Stack Overflow用户

提问于 2018-09-15 15:26:24

回答 2查看 1.1K关注 0票数 1

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

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

我肚脐的相关部分：

$(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>

bootstrap-4

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-09-15 16:02:06

我已经使用引导引导程序4所推荐的cdn版本(jquery.js、popper.js、bootstrap.js)运行了您的代码，所有这些版本似乎都在well.Try中将这些版本更改为推荐的版本，如正式的引导页https://getbootstrap.com/docs/4.1/getting-started/introduction/。

票数 0

Stack Overflow用户

发布于 2018-09-15 15:45:08

这很好用。检查这些文件是否在适当的位置：

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52346126

复制

相似问题

问更改活动类不起作用的jquery
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改活动类不起作用的jqueryEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改活动类不起作用的jquery
EN