javascript - onclick 导航栏元素更改为事件状态的代码

Question

我需要将导航栏元素的悬停状态更改为事件状态 onclick。我不知道如何编写此引导导航栏的代码，因为我无法真正访问链接/。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 编写的，我希望这足以让您开始使用导航栏。祝你好运!

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