jquery - 添加类事件 jQuery

Question

我为我的菜单写了一个简单的代码，但我遇到了一个 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 ) 上发布了完整的代码。

有人可以帮助我吗？

提前致谢

Answer 1

改变这些

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

到

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

去掉类名中的点