Entfernen: Fokus auf: aktiv

Question

Ich bin auf der Suche nach einer Möglichkeit, ein Element zu entfernen: Fokus, wenn es: aktiv wird.

Ich habe eine Navbar, die zwischen 3 Anker schaltet, wenn der Benutzer scrollt, feuern aus dem Anker: aktiv.

Wenn der Benutzer auf die Anker klickt, übergibt der Browser den Bildlauf an die Referenz des Ankers. Das Problem besteht darin, dass der Fokus weiterhin besteht, nachdem der Benutzer scrollt. Das bedeutet, dass ich einen Anker in: Fokus und einen in: aktiv haben könnte.

Meine Absicht ist es, den: Fokus entfernt zu haben, da das: active das Element trifft.

Ich konnte in Bezug auf dieses Problem bei Google nichts finden. Die meisten Fragen, die sich die Leute gestellt haben, beziehen sich auf das Entfernen der outline Elemente.

.navbar-default .navbar-nav>li>a:focus, 
 
.navbar-default .navbar-nav>li>a:hover { 
 
    color: #333; 
 
    background-color: black; 
 
} 
 
.navbar-nav>.active>a { 
 
    background-color: white; 
 
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1); 
 
    z-index: 1; 
 
} 
 
.navbar-nav>li>a { 
 
    color: #000000 !important; 
 
} 
 
#navbar { 
 
    margin: 12px 0; 
 
} 
 
.navbar-default .navbar-toggle { 
 
    border-color: #ddd; 
 
} 
 
.navbar-toggle { 
 
    position: relative; 
 
    float: right; 
 
    padding: 9vw 10vw margin-top: 8vw; 
 
    margin-right: 15vw; 
 
    margin-bottom: 8vw; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1vw solid transparent; 
 
    border-radius: 4vw; 
 
} 
 
.navbar-default .navbar-collapse { 
 
    border-color: #e7e7e7; 
 
} 
 
.nav>li { 
 
    height: 100%; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    letter-spacing: 2px; 
 
    display: -webkit-inline-box; 
 
    display: -webkit-inline-flex; 
 
    display: -ms-inline-flexbox; 
 
    display: inline-flex; 
 
} 
 
.nav>li>a:focus, 
 
.nav>li>a:hover { 
 
    text-decoration: none; 
 
    color: #722872; 
 
    background-color: #FFFFFF; 
 
} 
 
.nav>li a:hover { 
 
    color: #722872; 
 
    background: #FFFFFF; 
 
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1); 
 
    z-index: 2; 
 
}

<nav id="navbar" class="collapse navbar-collapse"> 
 
    <div class="navbar-header"> 
 

 
    <button type="button" data-toggle="collapse" data-target="#navBar-target" class="navbar-toggle"> 
 
     <span class="icon-bar"> </span> 
 
     <span class="icon-bar"> </span> 
 
     <span class="icon-bar"> </span> 
 
    </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navBar-target"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li> 
 
     <a href="#top"> About </a> 
 
     </li> 
 
     <li> 
 
     <a href="#portfolio"> Portfolio </a> 
 
     </li> 
 
     <li class> 
 
     <a href="#contact"> Contact </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 1

In meinem Fall wurde durch Zugabe dieses einfache jQuery-Schnipsel behandelt:

$('.nav li a').click(function() { 
    $(this).blur(); 
}); 

Dies ermöglicht es mir, die außer Kraft zu setzen: schweben, und wenn der Anker das obige Snippet geklickt wird wird abgefeuert, so dass der Klick 'transparent' während die: aktiv (scroll) darüber sein.