如何用jQuery选中active=true的锚点并实现选中类切换功能

没问题，这就帮你搞定这个分页选中状态的需求，分几步来操作：

1. 定义选中状态的CSS样式 #

先把.selected类的样式写好，按照你的要求设置红色字体：

.selected {
  color: red;
}

2. 参考你的页面结构 #

假设你的分页HTML结构是这样的（和你给出的示例匹配）：

<span class="paginate_numbers">
  <a active="true" class="paginate_button">1</a>
  <a class="paginate_button">2</a>
  <a class="paginate_button">3</a>
</span>

3. jQuery实现状态切换逻辑 #

接下来用jQuery完成初始选中状态设置和点击切换的功能：

$(document).ready(function() {
  // 页面加载完成后，给默认带有active="true"的按钮添加选中类
  $('.paginate_numbers a[active="true"]').addClass('selected');

  // 给所有分页按钮绑定点击事件
  $('.paginate_numbers .paginate_button').click(function(e) {
    // 阻止a标签默认的跳转行为（如果你的按钮需要跳转，可删除这行）
    e.preventDefault();
    
    // 先重置所有分页按钮的状态：移除选中类和active属性
    $('.paginate_numbers .paginate_button').removeClass('selected').removeAttr('active');
    
    // 给当前点击的按钮设置选中状态：添加类和active="true"属性
    $(this).addClass('selected').attr('active', 'true');
  });
});

小提示 #

• 用$(document).ready()是为了确保DOM加载完成后再执行代码，避免出现找不到元素的问题
• 如果你的分页按钮是需要跳转到其他页面的，可以去掉e.preventDefault()这一行
• 先重置所有按钮状态再设置当前按钮的逻辑，能保证任何时候都只有一个按钮处于选中状态，逻辑更稳定

内容的提问来源于stack exchange，提问作者Israel