Setting a:active for nav when linking to divs in a smooth scroll page

Question

I've created a smooth scrolling page with some relatively simple javascript, where each li in the navigation links to a different section div, moving down the page.

Unfortunately, my a:active doesn't work in the nav with this, and I'm fairly sure it's something in javascript I need to add, but can't seem to get it right. I've added "nav a:active" and also ".active" to my CSS to use in javascript. Could someone please help? Is it something with addClass/removeClass?

My 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>

I added these to my CSS (link and hover work):

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;
}

`Here's my 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

Wouldn't that be simple as this

$(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");
     });
 });