設置：在鏈接到光滑滾動頁面中的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"); 
    }); 
});