jQuery addClass && removeClass

Hello all, I am building a site with Bootstrap and jQuery. I am trying to make the nav li's change class. I tried looking it up and it gave me the code that i already had.

This is my HTML

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="contact.php">Contact</a></li>
            <li><a href="gallery.html">Gallery</a></li>
          </ul>
        </div>

This is my jQuery

$(document).ready(function(){ $("nav div ul li").click(function(){ $("li").removeClass("active"); $(this).addClass("active"); }); });

So my problem is when i click on the navigation bar it flicker to active but it always defaults back to Home. If i double click it actually stays which makes me think my code is right?

I am using NetBeans with MAMP since it has some PHP pages. (not sure if it matters)

If anyone could help i would really appreciate it!

Thank you!!