Bootstrap navbar turns grey when clicked after applying onclick - html

Question

My navbar worked just fine before I added an onclick function.
My onclick function looks like this:
$('.nav li a').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 2000);
return false;
}
}
});
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:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="../Images/Logo.png" width=200px" height="50px"/>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="home" href="#home">Home</a></li>
<li>My Projects</li>
<li>Contact</li>
</ul>
</div>
</div>

Answer 1

The onclick event is adding a focus pseudo class to your li > a element. Until you click away bootstrap is styling the nav item with the following css:
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: transparent;
}
You could overwrite the :focus styling or put this jquery: $(this).blur(); at the end of your function.