页面刷新后排序按钮CSS样式消失，如何实现选中样式持久化？

问题根因 #

你当前的sortDatas函数会直接修改location.href触发整页刷新，点击时changeBGColor修改的DOM样式会在页面重载后完全重置，所以样式只会短暂生效。

方案1：保留整页刷新逻辑（改动最小） #

不需要绑定点击时修改样式，改为页面加载完成后读取URL中的sort参数，自动给对应选项添加选中样式即可。

步骤1：修改HTML #

删除所有li标签onclick中的changeBGColor调用，不需要点击时临时修改样式：

<div class="filter-section">
    <ul>
        <li class="active" id="recent" onclick="sortDatas('recent')" >recent</li><br>
        <li class="active" id="old" onclick="sortDatas('old')" >old</li><br>
        <li class="active" id="commentlike" onclick="sortDatas('commentlike')">commentlike</li><br>
        <li class="active" id="answers" onclick="sortDatas('answers')">answers</li><br>
    </ul>
</div>

步骤2：新增页面加载时的样式初始化逻辑 #

在原有JS中添加DOM加载完成的监听事件：

// 原有代码保留
function sortDatas(obj){
    let url = new URL(window.location.href);
    url.searchParams.set('sort',obj);
    location.href=url;
}

// 新增页面加载初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
    // 读取URL中的排序参数，默认取recent
    const urlParams = new URLSearchParams(window.location.search);
    const activeSort = urlParams.get('sort') || 'recent';
    // 重置所有选项样式
    const allSortItems = document.querySelectorAll('.filter-section li');
    allSortItems.forEach(item => {
        item.classList.remove('active-select');
        item.classList.add('active');
    });
    // 给当前选中的排序项添加选中样式
    const activeItem = document.getElementById(activeSort);
    if(activeItem) {
        activeItem.classList.remove('active');
        activeItem.classList.add('active-select');
    }
});

原来的changeBGColor函数可以直接删除，不需要再使用。

方案2：改为异步无刷新请求（体验更优） #

如果不想整页刷新，可以修改sortDatas为异步拉取数据逻辑，页面不重载样式自然会保留：

async function sortDatas(category) {
    // 1. 异步拉取服务端数据
    const apiUrl = new URL('/你的问答数据接口地址', window.location.origin);
    apiUrl.searchParams.set('sort', category);
    const res = await fetch(apiUrl);
    const questionList = await res.json();
    
    // 2. 自行实现列表渲染逻辑，把新的问答数据更新到页面上
    renderQuestionList(questionList);
    
    // 3. 修改选中样式
    changeBGColor(category);
    
    // 可选：支持浏览器前进后退，修改URL不刷新
    const currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set('sort', category);
    history.pushState({sort: category}, '', currentUrl);
}

优化建议 #

如果是服务端渲染页面，也可以直接在后端渲染HTML时，根据请求参数里的sort值直接给对应li标签添加active-select类，不需要前端额外写JS处理，兼容性更好。

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