Question

我有以下简单的导航链接，我想确保当我点击任何链接时，＆＃34;活动＆＃34;除了刚刚点击的那个，除了所有其他li之外，class被删除了。在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

这是我对此的看法......

＆＃13;

$(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
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你可以做到

$('li').click(function() {
  var clicked = this;
  $(this).siblings('li').each(function() {
    if (this !== clicked) {
      $(this).removeClass('active');
    }
  });
})

Answer 3

$(".nav").on("click","li", function(){
   $(".nav li").removeClass('active')
   $(this).addClass('active')
})

Answer 4

我认为你应该可以使用.siblings方法。

请参阅https://api.jquery.com/siblings/

它甚至有一个列表示例。

在jQuery中如何选择未点击锚点的所有其他父li？

4 个答案: