如何使用bootstrap和jquery单击特定链接时添加活动类

发布时间：2020-12-17 21:33:04 所属栏目：安全来源：网络整理

导读：我正在尝试使用bootstrap和 jquery向一个单击的导航菜单li添加一个类. 当我点击菜单时,按预期添加了类,但没有添加相关的css属性 – 在特定情况下,颜色为红色 – 下面你可以找到一个非常简单的例子. $(document).ready(function() { $('#navlist a').click(fu

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!