설정 a : 부드러운 스크롤 페이지에서 div에 링크 할 때 nav에 대해 활성화

Question

상대적으로 간단한 javascript를 사용하여 부드러운 스크롤 페이지를 만들었습니다. 탐색의 각 li은 페이지 아래로 이동하면서 다른 섹션 div에 연결됩니다.

불행히도, 내 a : active는 nav와 함께 작동하지 않으며, javascript에서 추가해야하지만, 올바르게 할 수없는 것으로 확신합니다. 나는 javascript에서 사용하기 위해 "내비게이션 : 활성"과 ".active"를 CSS에 추가했다. 누군가 제발 도와 줄 수 있니? addClass/removeClass를 사용하는 것이 있습니까?

내 HTML :

<nav> 
     <div id="nav-list"> 
      <ul> 
       <li><a href="#page1">MUSIC</a></li> 
       <li><a href="#page2">SHOWS</a></li> 
       <li><a href="#page3">CONTACT</a></li> 
       <li><a href="#page4">SUPPORT</a></li> 
      </ul> 
     </div> 
    </nav> 


<div id="container"> 
    <section id="home"> 
     </section> 
    <section id="page1"> 
     </section> 
    <section id="page2"> 
     </section> 
    <section id="page3"> 
     </section> 
    <section id="page4"> 
     </section> 
</div> 

내가 내 CSS (링크와 마우스를 작업)에 다음을 추가 :

nav a:link, a:visited { 
font: sans-serif; 
font-size: 20px; 
color: black; 
text-decoration: none; 
} 

nav a:hover { 
background-color: black; 
color: white; 
} 

nav a:active { 
background-color: black; 
color: white; 
} 

.active { 
background-color: black; 
color: white; 
} 

`여기 내 script.js

$(function(){ 
    $("nav a").click(function() { 
    var navId= $(this).attr("href"); 
    $("html body").animate({scrollTop: $(navId).offset().top},600); 
    return false; 

     /* I thought something like this would work... 
     if (navId === true { 
     ("nav a").addClass("active"); 
     } else { ("nav a").removeClass("active"); 
     ); 
     */ 
    }); 
    }); 

Answer 1

는 않을 것 그만큼 단순 해.

$(function() { 
    $("nav a").click(function (e) { 
     e.preventDefault(); 
     var navId = $(this).attr("href"); 
     $("html body").animate({ 
      scrollTop: $(navId).offset().top 
     }, 600); 
     $(this).closest('ul').find('a').removeClass("active"); 
     $(this).addClass("active"); 
    }); 
});