jquery - 如何删除/添加事件类到 Jquery 中的元素？

Question

有人可以帮我吗，我在弄清楚如何为垂直菜单删除/添加事件类时遇到了麻烦？

HTML

<ul class="vertical__menu">
  <li>
    <a class="vertical__menu-item--active" href="#">Truck Route</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Location Map</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Major Retailers Map</a>
  </li>
</ul>

CSS

.vertical__menu-item {
  color: blue
}
.vertical__menu-item--active {
  color: red    
}

JQUERY

$(document).ready(function () {
  $('ul.vertical__menu li a').click(function () {
    $('vertical__menu-item').removeClass("--active");
    $(this).addClass("--active");
  });
});

Answer 1

您需要添加/删除类 .vertical__menu-item--active，目前在您的代码中您正在删除不存在的类 --active在你的CSS中。您也没有选择当前在您的 jquery 中的元素，并且您在标记的第一个列表项上缺少 .vertical__menu-item 因此当您尝试删除时它不会被选中.vertical__menu-item--active 类，检查下面的工作演示:

$(document).ready(function () {
  $('.vertical__menu-item').click(function () {
    $('.vertical__menu-item').removeClass("vertical__menu-item--active ");
    $(this).addClass("vertical__menu-item--active ");
  });
});

.vertical__menu-item {
  color: blue
}
.vertical__menu-item--active {
  color: red    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="vertical__menu">
  <li>
    <a class="vertical__menu-item vertical__menu-item--active" href="#">Truck Route</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Location Map</a>
  </li>
  <li>
    <a class="vertical__menu-item" href="#">Major Retailers Map</a>
  </li>
</ul>