Bootstrap navbar turns grey when clicked after applying onclick
<p>My navbar worked just fine before I added an onclick function.
My onclick function looks like this:</p>

<pre><code>$('.nav li a').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        &amp;&amp; location.hostname == this.hostname) {
        var $target = $(this.hash);
        $target = $target.length &amp;&amp; $target
            || $('[name=' + this.hash.slice(1) +']');
        if ($target.length) {
            var targetOffset = $target.offset().top;
            $('html,body')
                .animate({scrollTop: targetOffset}, 2000);
            return false;
        }
    }
});
</code></pre>

<p>When I click on one of my items in my navbar it does the onclick function, but when I hover my mouse outside of the navbar item that I just clicked on, it turns grey. When I click on anything after that it removes the grey color again.
My navbar looks like this:</p>

<pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
&lt;div class="container"&gt;
    &lt;div class="navbar-header"&gt;

        &lt;a href="#home"&gt;&lt;img src="../Images/Logo.png" width=200px" height="50px"/&gt;&lt;/a&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;

    &lt;/div&gt;

    &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;

        &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a class="home" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#projects"&gt;My Projects&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

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

<p></p>