Code für onclick navbar Element ändert sich in aktiven Zustand

Question

Ich muss den Hover-Status der Navbar-Element in aktiven Zustand onclick.Ich weiß nicht, wie Sie den Code für diese Bootsrap Navbar schreiben, da ich nicht wirklich auf die Links zugreifen /. Alles in jquery/javascript/php wird hilfreich sein.

MY HTML-Code:

<div class="navbar-inner"> 

    <ul class="nav navbar-nav"> 

    <li class="nav-item active"> 
     <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a> 
    </li> 

    <li class="nav-item"> 
     <a class="nav-link" href="#">DETAILS</a> 
    </li> 

    <li class="nav-item"> 
     <a class="nav-link" href="#">ABOUT</a> 
    </li> 

    <li class="nav-item"> 
     <a class="nav-link" href="#">CONTACT</a> 
    </li> 

    </ul> 

</div> 

</nav> 

MY CSS CODE:

.navbar {

 margin: 10px; 

    } 

    .navbar.center .navbar-inner 
    { 

     text-align: center; 
    } 

    .navbar.center .navbar-inner .nav 
    { 

     float: none; 
     display:inline-block; 
    } 
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter, 
    .navbar .nav > li.current-menu-item > a, 
    .navbar .nav > li.current-menu-ancestor > a 
    { 
     display:  inline; 
     color:   white;       
     font-family: 'Droid Serif', Georgia, Times, serif; 
     font-size:  12px; 
     padding:  10px; 
     font-weight: bold; 
     letter-spacing: 2.5px; 
     border: 2px solid transparent; 




    } 
    .navbar .navbar-nav > li > a:hover, 
    .navbar .navbar-nav > li > a:focus 
    { 

     border: 2px solid black; 
     border-radius: 10px; 
     padding: 10px; 



    } 

    .navbar-default .navbar-nav > .active > a, 
    .navbar-default .navbar-nav > .active > a:hover, 
    .navbar-default .navbar-nav > .active > a:focus 
    { 
     color: white; 
     background: black; 

     border-radius: 10px; 
     padding: 10px; 
    } 

Answer 1

Dieser Code in jQuery ist, ich hoffe, dies genug ist, Beginnen Sie mit dem, was Sie mit Ihren Navbars machen möchten. Viel Glück!

//Click event handler for nav-items 
$('.nav-item').on('click',function(){ 

    //Remove any previous active classes 
    $('.nav-item').removeClass('active'); 

    //Add active class to the clicked item 
    $(this).addClass('active'); 
});