jquery - 使用 bootstrap 和jQuery单击特定链接后，如何添加事件类

我正在尝试使用 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

最佳答案

试试这个代码-

$(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; }

这是 fiddle -
https://jsfiddle.net/yLpn2nmb/3/