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

【问题标题】：code for onclick navbar item changes to active stateonclick 导航栏项目的代码更改为活动状态
【发布时间】：2016-05-16 06:48:01
【问题描述】：

我需要将导航栏项的悬停状态更改为活动状态 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;
    }

【问题讨论】：

请粘贴您的javascript代码
发布导航栏的整个HTML代码
我没写过。我试过写了但是没用所以删除了。

标签： javascript jquery css navbar

【解决方案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');
});

【讨论】：

这段代码对你有用吗，因为它对我不起作用。我在 css 中的类很大，所以你能具体在添加和删除类中具体写什么
@AkshaySargar 你所说的“大”是什么意思？您可以将活动更改为您的班级名称。它只是为已单击的项目添加和删除类。

【解决方案2】：

这可能是一个旧帖子，但我和你有同样的问题，并且提供的代码 sn-p 也不起作用。我找到的解决方案是将代码添加到这样的 ready() 函数中。请注意，我使用了一个 <script> 标签来包含我的 jQuery

$(document).ready(function(){ 

$('.nav-item').on("click", function(){

$('.nav-item').removeClass('active');

$(this).addClass('active');
});
});

【讨论】：