Question

我需要将导航栏项的悬停状态更改为活动状态onclick。我不知道如何编写此bootsrap导航栏的代码，因为我无法真正访问链接/。在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');
});

Answer 2

这可能是一篇过时的文章，但是我和您遇到了同样的问题，并且提供的代码段也不起作用。我发现的解决方案是将代码添加到ready（）函数中。请注意，我使用了一个<script>标签来包含我的jQuery

$(document).ready(function(){ 

$('.nav-item').on("click", function(){

$('.nav-item').removeClass('active');

$(this).addClass('active');
});
});

onclick导航栏项的代码更改为活动状态

2 个答案: