onclick導航欄項目更改爲活動狀態的代碼

Question

我需要將導航欄項目的懸停狀態更改爲活動狀態onclick.I不知道如何編寫此導航欄導航欄的代碼，因爲我無法真正訪問鏈接/。任何在jquery/javascript/php中都會有所幫助。

我的HTML代碼：

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

我的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的，我希望這是足以讓你開始用你想用你的navbars做什麼。祝你好運！

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