onclickを適用した後にクリックすると、ブートストラップのnavbarがグレーになります。

Question

onclick関数を追加する前に、私のnavbarが正常に機能しました。 私のonclickの機能は次のようになります。私は私のナビゲーションバーでの私の項目のいずれかをクリック

$('.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; 
     } 
    } 
}); 

それはonclickの機能を行いますが、私は、私はちょうど上のクリックされたナビゲーションバーの項目の外に私のマウスを置くと、それを灰色に変わります。後に何かをクリックすると、再び灰色が消えます。 私のナビゲーションバーには、次のようになります。

<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <div class="navbar-header"> 

     <a href="#home"><img src="../Images/Logo.png" width=200px" height="50px"/></a> 
     <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><a href="#projects">My Projects</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 

    </div> 
</div> 

Answer 1

onclickイベントは、あなたのLI>要素にfocus疑似クラスを追加しています。フォーカススタイリングや、このjqueryのを置く：あなたは上書きする可能性が

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { 
    color: #333; 
    background-color: transparent; 
} 

：あなたは、ブートストラップには、以下のCSSを使用したナビゲーションアイテムのスタイリングされて離れてクリックするまで$（この）.blurを（）;あなたの機能の終わりに。