2016-03-21 18 views
0

On navbar, bir onclick işlevi eklemeden önce iyi çalıştı. Benim onclick işlevi şöyle görünür: Ben gezinme çubuğu üzerinde öğelerimin birine tıklayınBootstrap navbar, onclick uygulamasından sonra tıklandığında griye döner

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

o onclick işlevini yapar, ama sadece tıklanan navbar öğenin dışında benim fareyi getirdiğinizde, bunu griye döner. Bundan sonra herhangi bir şeye tıkladığımda gri rengi tekrar kaldırır. Benim navbar şöyle görünür:

<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> 

cevap

1

onclick Etkinlik li> bir elemana bir odak sözde sınıfını ekliyor. Eğer önyükleme aşağıdaki css ile nav öğesi stil olduğunu uzakta tıklayın kadar:) ($ (this) .blur;: odak stil veya bu jquery koyun:

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

Sen üzerine yazabilirsiniz senin işlevinin sonunda.

İlgili konular