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

Question

我需要在使用jquery在引导程序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); 
}); 

我用无礼的话，我的导航栏和链接代码：

.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

所以我改变了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; 
      } 
     } 
     } 
    } 

了这一切后，我实现了我需要的东西。

Answer 2

好了，这是与SCSS一个问题，因为你在@media (min-width: 768px)查询下定义.active-nav-link样式。这使得你的风格只在比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; 
     }*/ 
    } 
    } 
}