javascript - 在 jQuery 中，如何选择未单击 anchor 的所有其他父级 li？

Question

我有以下简单的导航链接，我想确保当我单击任何链接时，“事件”类将从除刚刚单击的链接之外的所有其他链接中删除。在 jQuery 中，我如何设置选择器来实现此目的？

<ul class="nav">
    <li><a href="#">Link 1</a></li>
    <li class="active"><a href="#">Link 2</a></li>
    <li class="active"><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

Answer 1

这是我对此的看法...

$(function() {
  $('.nav li a').on('click', function() {
    $('.nav li').removeClass('active'); // remove active class from all 
    $(this).closest('li').addClass('active'); // add active classs to element clicked
  });
});

.active {
  color: red;
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#">Link 1</a>
  </li>
  <li class="active"><a href="#">Link 2</a>
  </li>
  <li class="active"><a href="#">Link 3</a>
  </li>
  <li><a href="#">Link 4</a>
  </li>
</ul>