Bootstrap分页点击后刷新丢失红色背景，如何保留当前页样式？

页面刷新后你添加的active-page类消失，是因为客户端JS添加的样式会在页面重新加载时被重置——毕竟刷新后整个DOM都会重新渲染，之前的JS操作不会被保留。要解决这个问题，核心是在页面初始化时，根据当前URL的状态自动匹配对应分页项并添加样式，具体实现如下：

1. 调整JS逻辑（页面加载时自动匹配） #

把原来的点击触发逻辑，改成页面加载时根据URL参数识别当前页，给对应分页链接加类：

$(document).ready(function() {
    // 获取当前URL中的page参数（比如?page=login、?page=2这类）
    const urlParams = new URLSearchParams(window.location.search);
    const currentPage = urlParams.get('page');

    // 如果存在page参数，匹配对应的分页链接
    if (currentPage) {
        $('.page-link').each(function() {
            // 检查链接的href是否包含对应page参数
            if ($(this).attr('href').includes(`?page=${currentPage}`)) {
                $(this).addClass('active-page');
            }
        });
    }
});

如果你的分页用的是锚点（比如href="#page1"），可以改成锚点匹配逻辑：

$(document).ready(function() {
    const currentAnchor = window.location.hash;
    if (currentAnchor) {
        $('.page-link[href="' + currentAnchor + '"]').addClass('active-page');
    }
});

2. 优化CSS样式（确保覆盖Bootstrap默认样式） #

Bootstrap的page-link本身有默认背景样式，需要提高自定义样式的权重才能生效：

.page-link.active-page {
  background-color: red !important;
  border-color: red; /* 可选：让边框和背景色一致 */
  color: white; /* 可选：文字变白更醒目 */
}

3. 调整分页HTML（统一参数格式） #

确保所有分页链接的参数格式一致，方便JS匹配：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="pagination">
   <li class="page-item"><a class="page-link" href="?page=login">1</a></li>
   <li class="page-item"><a class="page-link" href="?page=2">2</a></li>
   <li class="page-item"><a class="page-link" href="?page=3">3</a></li>
</ul>

关键逻辑说明 #

• 页面刷新后，客户端的临时状态会丢失，必须在页面加载完成时，通过URL的参数/锚点/路径来识别当前页，主动给对应分页项加样式
• 利用URLSearchParams解析URL参数，是最通用的分页匹配方式，适用于绝大多数带参数的分页场景

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