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