Question

我需要在使用jquery点击bootstrap 4的navbar后更改活动的链接类。但它不起作用。我在jquery中的代码完全适用于其他链接，但不使用navbar。问题是什么？

Navbar代码：

<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;
      }
    }

}

Answer 1

好的，所以这是scss的问题，因为您在.active-nav-link查询下定义了@media (min-width: 768px)样式。这使您的样式仅对宽度超过768px的视口有效。尝试将此定义置于查询之外，如下所示：

.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;
      }*/
    }
  }
}

Answer 2

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

首先，在navbar-nav列表中，我将班级nav更改为navbar-nav。需要这样做，因为灰色已附加到类.nav { flex-direction: column; //for mobile version } @media (min-width: 768px) { .main-header { .menu { .nav { flex-direction: row; } } } }。

在样式中添加了这个：

{{1}}

在完成所有这些后，我实现了我所需要的。

使用jquery在navbar bootstrap 4中单击后，无法更改活动的链接类

2 个答案: