Question

我正在尝试使用bootstrap和jquery为单击的导航菜单li添加一个类。当我点击菜单时，按预期添加了类，但没有添加相关的css属性 - 在特定情况下，颜色为红色 - 下面你可以找到一个非常简单的例子。

  $(document).ready(function() {
    $('#navlist a').click(function(e) {
      e.preventDefault();
      $('#navlist a').removeClass('active');
      $(this).addClass('active');
    });

  });

.nav {
  color: green;
}
.active {
  color: red;
}

<ul class="list-unstyled" id="navlist">
  <li id="home"><a class="nav" href="#">Home</a>
  </li>
  <li id="about"><a class="nav" href="#">About Us</a>
  </li>
</ul>

fiddle

Answer 1

它可能是另一种风格，例如#navlist a { color: #000; }其他地方是您的代码覆盖了您的.active类：

尝试更改：

.active {
    color: red;
}

要：

#navlist a.active {
    color: red;
}

或者：

#navlist a.nav.active {
    color: red;
}

这将增加类的specificity，它应该覆盖任何可能覆盖它的其他类。

注意：你说实际的jQuery正在按预期工作，所以我完全专注于你问题的CSS方面......

Answer 2

试试这段代码 -

$(document).ready(function(){
              $('#navlist a').click(function(e) {
              e.preventDefault();
              $('#navlist a').removeClass('active');
              $('#navlist a').addClass('nav');
              $(this).toggleClass('nav');
              $(this).toggleClass('active');
          });
});

和这个CSS -

a.nav:link { color: green; }
a.active:link { color: red; }

这是小提琴 - https://jsfiddle.net/yLpn2nmb/3/

Answer 3

尝试这样的事情

$(document).ready(function(){
$('.nav').click(function(e) {
    e.preventDefault();
    $(this).removeClass('active');
    $(this).addClass('active');
});

});

我认为这就是你想要发生的事情

如何使用bootstrap和jquery

3 个答案: