设置：在链接到光滑滚动页面中的div时active为导航

Question

我用一些相对简单的javascript创建了一个平滑的滚动页面，其中导航中的每个li链接到不同的div div，向下移动页面。

不幸的是，我的a：active并没有在这个导航中工作，我相当确定这是在javascript中我需要添加的东西，但似乎无法做到正确。我已将“nav a：active”和“.active”添加到我的CSS中以在JavaScript中使用。有人可以帮忙吗？这是与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"); 
    }); 
});