(html/css/javascript) Trying to make my Current Page link in the navbar a different color
<p>I've been reading around and people recommending only CSS to change the current page navbar link background color but I don't get how that's possible since CSS is static and I won't be able to add/remove the <code>.currentlink</code> class on the links? So right now I'm using JS / jquery to try to add / remove class based on click, but the site refreshes and nothing is saved when I click, so that the class that I added/removed doesn't do anything. May someone guide me the right direction? Example: I click on the last link of the HTML I gave you, but it would just go to that site and since everything refreshes to a new site, the background doesn't change.</p>

<p>HTML</p>

<pre><code>    &lt;nav class="clearfix"&gt;

        &lt;a href="#"&gt;home&lt;/a&gt; 
        &lt;a href="#"&gt;about us&lt;/a&gt; 
        &lt;a href="#"&gt;tour&lt;/a&gt;
        &lt;a href="index.html"&gt;flickr search&lt;/a&gt;

    &lt;div class="rightnav"&gt;
        &lt;a href="#"&gt;Sign Up&lt;/a&gt;
        &lt;a href="#"&gt;Log In&lt;/a&gt;
    &lt;/div&gt;

    &lt;/nav&gt;
</code></pre>

<p>CSS</p>

<pre><code>.greybackground {
background: #E6E6E6;
}
</code></pre>

<p>JS</p>

<pre><code>$('nav a').on('click', function(){
    $('nav a').removeClass('greybackground');
    $(this).addClass('greybackground');
});
</code></pre>
