引导导航栏中的活动链接名称不会改变颜色答案

【问题标题】：Active link name is not changing color in bootstrap navbar引导导航栏中的活动链接名称不会改变颜色
【发布时间】：2021-11-12 10:01:46
【问题描述】：

这是我目前正在开发的单页网站。但是，当我单击导航栏中的另一个链接时，尽管悬停效果很好，但它并没有改变颜色。这是我的html代码：

<html>
<body>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<li class="nav-item ">
    <a class="nav-link scroll active " aria-current="page" href="#intro">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link scroll" href="#about">About Us </a>
</li>
<li class="nav-item">
    <a class="nav-link scroll" href="#services">Services</a>
</li>
<li class="nav-item">
    <a class="nav-link scroll" href="#">Products</a>
</li>
</ul>
</div>
</html>
</body>

enter image description here

这是我的 CSS：

<style>
.navbar .nav-item a {
  color: #5cbf8f !important;
}

.navbar .nav-item a:hover {
  color: #028b77 !important;
}

.navbar .nav-item a.active {
  color: #028b77 !important;
}
</style>

enter image description here

这是我的 Js：

<script>
$(document).ready(function () {
  var scrollLink = $(".scroll");

  // Smooth scrolling
  scrollLink.click(function (e) {
    e.preventDefault();
    $("body,html").animate(
      {
        scrollTop: $(this.hash).offset().top,
      },
      1000
    );
  });

  // Active link switching
  $(window).scroll(function () {
    var scrollbarLocation = $(this).scrollTop();

    scrollLink.each(function () {
      var sectionOffset = $(this.hash).offset().top - 20;

      if (sectionOffset <= scrollbarLocation) {
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
      }
    });
  });
});
</script>

enter image description here

N.B：对js不太了解，只是在网上找到的。

导航栏：

enter image description here

【问题讨论】：

请张贴代码 sn-ps 而不是截图

标签： javascript html css twitter-bootstrap

【解决方案1】：

我觉得你的js错了。

$('.active').removeClass('active');
$(this).addClass('active');

如果 DOM 层次结构已知，则可以使用更有效的选项。

例如，如果他们都是兄弟姐妹，你可以这样：

$(this).addClass('active').siblings('.active').removeClass('active');

【讨论】：

所以我只需要将该代码放在我的脚本标签中，或者您可以更具体一些
我对您的帖子有一些疑问。
第一：在悬停时更改颜色不起作用或活动不起作用？
悬停时改变颜色有效，但活动无效
知道了，所以我认为javascript有一些错误