onclick navbarのコードがアクティブな状態に変更されました

Question

navbar項目のホバー状態をアクティブ状態onclickに変更する必要があります。このbootsrap navbarのコードを書く方法はわかりません。 jquery/javascript/phpにあるものは参考になります。

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コード：

.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

このコードはjQueryのである、私はこれはに十分であると思いますあなたのナビバーで何をしたいのかを始めることができます。がんばろう！

//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'); 
});