Question

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

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

$(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）上，我发布了完整的代码。

有人可以帮助我吗？

提前致谢

Answer 1

更改这些

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

到

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

从班级名称

中删除点

Answer 2

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

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

添加类活动jQuery

2 个答案: