使用 jquery 在导航栏引导程序 4 中单击后无法更改链接的活动类答案

【问题标题】：Can't change active class of link after click in navbar bootstrap 4 with jquery使用 jquery 在导航栏引导程序 4 中单击后无法更改链接的活动类
【发布时间】：2018-05-16 14:46:32
【问题描述】：

在使用 jquery 在 bootstrap 4 的导航栏中单击后，我需要更改链接的活动类。但它不起作用。我在 jquery 中的代码完美地适用于其他链接，但不适用于导航栏。有什么问题？

导航条码：

<header class="d-flex main-header">
    <div class="container header-container">
        <nav class="navbar navbar-toggleable-sm navbar-inverse main-navigation fixed-top">
            <div class="d-flex align-items-center content-nav-wrapper col-10 offset-1">
                <h1 class="mr-auto"><a href="index.html"><img src="images/site_logo.png" alt="logo"></a></h1>
                <button class="navbar-toggler navbar-toggler-right offcanvas-toggle menu-button align-self-center" type="button"
                        data-toggle="offcanvas"
                        data-target="#js-bootstrap-offcanvas" aria-controls="navbarCollapse" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-offcanvas navbar-offcanvas-touch navbar-offcanvas-right menu"
                     id="js-bootstrap-offcanvas">
                    <ul class="navbar-nav ml-md-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#team">Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</header>

点击后更改活动类的Jquery：

$(document).ready(function() {
    $(".navbar .navbar-nav li a").click(function () {
        $(".navbar .navbar-nav li a").removeClass("active-nav-link");
        $(this).addClass("active-nav-link");
    });
});

当用户将页面滚动到某个部分时，我还有 jquery 可以在单击后平滑滚动到部分并更改链接的颜色和背景。可能有问题：

jQuery(window).scroll(function(){
    var $sections = $('section');
    $sections.each(function(i,el){
        var top  = $(el).offset().top-100;
        var bottom = top +$(el).height();
        var scroll = $(window).scrollTop();
        var id = $(el).attr('id');
        if( scroll > top && scroll < bottom){
            $('a.active-section-link').removeClass('active-section-link');
            $('a[href="#'+id+'"]').addClass('active-section-link');

        }
    })
});

$("nav").on("click","a", function (event) {

    event.preventDefault();
    var id  = $(this).attr('href'),
        top = $(id).offset().top;
    $('body,html').animate({scrollTop: top}, 800);
});

我正在使用 Sass，我的导航栏和链接代码：

.main-header {

  .header-container {
    width: inherit;
  }

  .menu {
    overflow: hidden;

    .nav-link {
      color: #ffffff;
      font-size: 1.2rem;

        &:hover {
          color: #2ecc71;
        }
    }
  }

@media (min-width: 768px) { 
.menu {

      .active-section-link {
        color: #2ecc71;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
      }

      .active-nav-link {
        color: #2ecc71;
      }
    }

}

【问题讨论】：

它似乎正在工作。哪个部分不适合您？
点击导航栏中的链接后，我希望它具有其他颜色，但颜色不会更改为我需要的颜色，它会更改为引导程序的默认颜色，即灰色。跨度>
我添加了一些我的 jquery 代码，可能有问题
JS 好像没问题，给我们看看 CSS 代码。
添加了我的 Sass 用于导航

标签： jquery html sass bootstrap-4

【解决方案1】：

好的，这是 scss 的一个问题，因为您在 @media (min-width: 768px) 查询下定义了 .active-nav-link 样式。这使您的样式仅在大于 768 像素的视口上有效。尝试将此定义放在查询之外，如下所示：

.main-header {
  .header-container {
    width: inherit;
  }

  .menu {
    overflow: hidden;

    .nav-link {
      color: #ffffff;
      font-size: 1.2rem;

      /* new place */
      &.active-nav-link {
        color: #2ecc71;
      }

      &:hover {
        color: #2ecc71;
      }
    }
  }

  @media (min-width: 768px) {
    .menu {
      .active-section-link {
        color: #2ecc71;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
      }

      /*.active-nav-link {
        color: #2ecc71;
      }*/
    }
  }
}

【讨论】：

我需要它只在大于 768px 的视口上工作。但是您的解决方案没有帮助。点击后链接仍然是灰色的。我不明白为什么活动类在点击后不能覆盖引导灰色。
请查看Fiddle。这似乎与您的原始代码一起使用，除了我已将媒体查询更改为 @media (min-width: 300px) 以展示 Fiddler 较小 iframe 中的行为。
我发现了有趣的事情，点击链接后代码工作和活动类发生了变化，但是点击链接后它变成灰色，但是当我点击页面上的任何地方时，链接变成了用活动类而不是灰色写的颜色。
以及由于引导类 .nav-link 而出现的这种灰色
这一定是因为:focus 伪选择器。在这种情况下，解决此问题的一种方法是使用 !important 标志：color: #2ecc71 !important;。

【解决方案2】：

所以我改变了 ul 的类并添加了一些 styles.scss 代码。

首先在ul 列表中，我将类navbar-nav 更改为nav。需要这样做，因为灰色附加到类navbar-nav。

在样式中添加了这个：

     .nav { 
          flex-direction: column; //for mobile version
        }

    @media (min-width: 768px) {

      .main-header {

        .menu {

          .nav {
            flex-direction: row;
          }
        }
      }
    }

在这一切之后，我实现了我所需要的。

【讨论】：