jquery - 仅在一个锚上分类并从该 ul 中的所有锚中删除

Question

我在 html 中有一个 UL，如下所示：

<ul class="most-populer">
  <li><a id="popular" class=" " href="#">Most Popular</a></li>
  <li><a id="price" href="#" class=" ">Price</a></li>
  <li><a id="rating" href="#" class=" ">Star Rating</a></li>
  <li><a id="alphabetic" href="#" class="active">Name</a></li>
</ul>

我正在使用 ajax 函数根据这些搜索条件过滤结果。那对我来说很好。现在我想要的是，如果用户单击，popular那么只有popular锚标记具有active类并从其他锚标记中删除。

我知道jquery 的addClass()和removeClass()方法

active但是，如果用户单击 UL 只有该锚具有类的任何链接，我想以这种方式使用它们。

Answer 1

jsFiddle 演示

$('ul.most-popular li a').click(function( e ){
    e.preventDefault(); // prevent def. anchor behavior !
    $('ul.most-popular').find('.active').removeClass('active');
    $(this).addClass('active');
});

Answer 2

$(".most-populer li a").on("click", function() {
   $(this).addClass("active").parent().siblings().find("a").removeClass("active");
});

Answer 3

$(".most_populer a").click(function(e) {
    $(".most_populer a.active").removeClass("active"); // remove active classes
    $(this).addClass("active"); // add active class to clicked element
    e.preventDefault(); // prevent default link behavior
});