如何修改分页组件active类样式，实现点击后保持红色状态？

问题原因 #

你当前使用的是CSS的:active伪类，这个伪类仅在鼠标按住元素的瞬间生效，松开鼠标后样式就会回退到默认状态。但你的JS逻辑是通过给<li>元素添加active类来标记当前选中的分页项，两者没有形成对应，导致激活样式无法持久显示。

修复方案 #

1. 修正CSS样式 #

把原来针对:active伪类的样式，改成匹配带有active类的<li>下的<a>标签：

/* 针对激活状态的分页项设置持久样式 */
.pagination li.active a.page-link {
  background-color: red;
  color: #fff; /* 建议改为白色，红色背景配红色文字完全不可读 */
}

/* 可选：保留点击瞬间的反馈样式，增强交互感 */
.pagination a.page-link:active {
  background-color: darkred;
}

2. 补充分页逻辑（可选） #

你的JS代码只实现了样式切换，没有完成对应页码内容的显示逻辑，补充后让分页功能完整：

$(".pagination li.current-page").on("click", function() {
  if($(this).hasClass("active")){
    return false;
  }else{
    var currentPage = $(this).index();
    $(".pagination li").removeClass("active");
    $(this).addClass("active");
    // 隐藏所有内容，显示当前页码对应的内容
    $("#page .content").hide();
    $("#page .content").eq(currentPage - 1).show(); // 页码从1开始，内容索引从0开始，需减1
  }
});

关键说明 #

核心是让CSS选择器与JS添加的active类一一对应，这样当JS给<li>标记active类后，样式会一直生效，直到该类被移除。调整文字颜色是为了保证基础可读性，属于细节优化。

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