如何用jQuery为月份筛选锚点添加激活类切换功能

架构老林

2026-7-31

问题

我正在实现月份列表筛选功能，目前功能运行正常，但需要为用户点击的月份锚点添加激活状态，点击其他月份时切换该状态。现有代码如下：

$("a.filter").on("click", function(e) {
  var a = $(this);
  $("#view .hide").hide();
  $("#view div." + a.data("filter")).show();
});

<a href="#" class="filter" data-filter="February">February</a>
<a href="#" class="filter" data-filter="March">March</a>

请问如何精准定位用户点击的锚点并为其添加激活类？

补充

我已通过以下代码实现功能，但不确定是否为最优方案：

$("a[data-filter='" + a.data("filter") +"']").addClass('element-active');

解决方案

你的实现思路没问题，但可以更高效——$(this)本身就是当前点击的锚点元素，没必要通过data-filter属性重新查找DOM节点，直接操作这个对象即可。另外，别忘了移除其他锚点的激活类，否则所有点击过的锚点都会保留激活状态。

完整优化代码如下：

$("a.filter").on("click", function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为，避免页面滚动到顶部
  var a = $(this);
  
  // 先移除所有筛选锚点的激活类
  $("a.filter").removeClass('element-active');
  // 给当前点击的锚点添加激活类
  a.addClass('element-active');
  
  // 执行原有的筛选逻辑
  $("#view .hide").hide();
  $("#view div." + a.data("filter")).show();
});