代码之家 › 专栏 › 技术社区 › Barry Beach

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

bootstrap-4 jquery

Barry Beach · 技术社区 · 6 年前

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

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

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

2 回复 | 直到 6 年前

Zadiki Hassan Ochola 6 年前

我已经用cdn版本运行了你的代码(jquery.js文件,波普尔.js,引导.js)由bootstrap推荐用于bootstrap 4,所有这些似乎都是好吧。试试看根据官方引导页面将这些版本更改为推荐版本 https://getbootstrap.com/docs/4.1/getting-started/introduction/

Tariqul Islam 6 年前

这很有效。

bootstrap.min.js文件-版本4.1.3

popper.min.js公司-版本1.14.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>