Dynamic active link not working

Question

I'm trying to make my static nav menu have a dynamic active-menu class. But it goes weird. When I click on a link all the links have the active class and after my page loads then it goes back to the original. So instead of menu being active dashboard is active again

My menu:

<ul class="nav">
    <li><a class="active-menu" href="#">Dashboard</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Content</a></li>
</ul>

My CSS:

.active-menu{
    background: #00baff !important;
}

My JS:

$(document).ready(function(){
  $(".nav a").click(function(){
    $("nav a").toggleClass("active-menu");
  });
});

Answer 1

It should be something like this

JS Fiddle

$(document).ready(function(){
    $(".nav a").click(function(event){
        event.preventDefault(); 
        $(".nav a").removeClass("active-menu");
        $(this).addClass("active-menu");
    });
});