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 demo

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

仅在一个锚上进行分类，并从该ul中的所有锚中删除

3 个答案: