navbar에서 클릭 후 활성 클래스를 변경할 수 없습니다 jquery로 부트 스트랩 4

Question

jquery로 부트 스트랩 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와 : 또한 내가 클릭 한 후 섹션에 부드러운 스크롤을위한 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(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

좋아, 그래서 이것은 당신으로, SCS들에 문제가있다 @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; 
     }*/ 
    } 
    } 
}