Dynamic active link not working

Dynamic active link not working

I'm trying to make my static nav menu have a dynamic active-menu class. At the moment if I click on one of my menu items the active-menu class works but I can't get into those pages. I know that it is the 
  1. event.preventDefault();

that is causing this, but if I remove it then the active-menu class doesn't work.


my menu
  1. <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

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

My js

  1. $(document).ready(function () {

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