添加类活动 jQuery答案

【问题标题】：Add class active jQuery添加类活动 jQuery
【发布时间】：2018-05-02 07:33:40
【问题描述】：

我为我的菜单编写了一个简单的代码，但我遇到了一个 jQuery 问题，我找不到错误。

我想在用户选择的“li”上应用 .active 类，所以我写了这段代码：

$(document).ready(function () {
  $('.port-menu-item').click(function () {
    $('.port-menu-item').removeClass('.active');
    $(this).toggleClass('.active');
  });
});

.port-menu-item {    
  padding: 25px 5px;
  position: relative;    
  text-decoration: none;
  color: rgb(158, 157, 157);
  font-size: 25px;
  cursor: pointer;
}
.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="port-side-menu">
  <li class="port-menu-item">Nature</li>
  <li class="port-menu-item">Nightlife</li>
  <li class="port-menu-item">People</li>
  <li class="port-menu-item">Projects</li>
</ul>

在我检查页面时，我可以看到 .active 类设置正确，但“li”并没有改变它的样式。

在 codepen (https://codepen.io/Alfaver/pen/zPpZXv) 上我发布了完整的代码。

有人可以帮我吗？

提前致谢

【问题讨论】：

标签： jquery css class click

【解决方案1】：

改变这些

 $('.port-menu-item').removeClass('.active');
 $(this).toggleClass('.active');

到

 $('.port-menu-item').removeClass('active');
      $(this).toggleClass('active');

去掉类名中的点

【讨论】：

【解决方案2】：

只需使用此代码，您在 removeClass,toggleClass 参数中添加了一个点，这不是使用此 jquery 函数的方法`

 $(document).ready(function () {
    $('.port-menu-item').click(function () {
      $('.port-menu-item').removeClass('active');
      $(this).toggleClass('active');
    });
});`

【讨论】：

也谢谢你！ :D