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