在平滑滚动页面中链接到 div 时为导航设置 a:active

Question

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

不幸的是，我的 a:active 不能在导航中使用它，我很确定这是我需要添加的 javascript 中的内容，但似乎无法正确处理。我在我的 CSS 中添加了“nav a:active”和“.active”，以便在 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");
     });
 });