javascript - CSS 效果因页面重新加载而消失

Question

有一个问答公告板，用于存储用户的问题。这个板可以按优先级顺序显示问题，但是我在这个过程中遇到了问题。

我想在单击特定<li>标签时应用并保留 CSS。

代码如下。该sortDatas()功能首先显示评论最多的问答。例如，如果你点击commentlike，一个名为commentlike的参数会被传递给，从服务器获取commentlikesortDatas()最高的数据，以便显示在窗口的顶部。

我想要的是，即使在sortDatas()函数执行完成后，函数应用的css效果changeBGColor()即使在刷新后也会继续。

在当前情况下，警报会在单击时出现，然后在应用 css 后立即消失。（因为窗口立即刷新）

原因似乎很清楚。似乎该changeBGColor()函数不应该直接应用于该onclick()函数。我明白为什么，但我不知道如何改进它。我应该怎么办？onload()我应该使用与函数相同的概念吗？

cf) 对服务器获取数据的请求是异步处理的。（使用async/ await）

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

<script>

    function sortDatas(obj){

        let url = new URL(window.location.href);
        url.searchParams.set('sort',obj);
        location.href=url;

    }

   function changeBGColor(category)
   {

       let c = document.getElementById(category);
        
       if(c.classList.contains("active"))
       {
           alert('1');
           c.classList.remove("active");
           c.classList.add("active-select");
       }
       else if(c.classList.contains("active-select"))
       {
           alert('2');
           c.classList.remove("active-select");
           c.classList.add("active");
       }
        
   }

</script>

标签： javascripthtmlcssreload