Блог

Существует доска объявлений с вопросами и ответами, где хранятся вопросы пользователей. Эта доска может отображать вопросы в порядке очередности, но у меня есть проблема в этом процессе.

Я хочу применять и сохранять CSS при нажатии на определенный <li> тег.

Код приведен ниже. sortDatas() Функция сначала показывает вопросы и ответы с наибольшим количеством комментариев. Например, если вы нажмете commentlike, будет передан параметр sortDatas() commentlike , и данные с наибольшим значением commentlike будут извлечены с сервера, чтобы их можно было отобразить в верхней части окна.

Я хочу, чтобы даже после завершения выполнения sortDatas() функции эффект css, применяемый changeBGColor() функцией, сохранялся даже после обновления.

В текущей ситуации предупреждение появляется в момент нажатия на него, а затем исчезает, как только применяется css. (так как окно немедленно обновляется)

Причина кажется ясной. Похоже, что changeBGColor() функция не должна применяться непосредственно к onclick() функции. Я понимаю почему, но я не знаю, как это улучшить. Что мне делать? Должен ли я использовать ту же концепцию, onload() что и функция?

c.f) Запросы к серверу для извлечения данных обрабатываются асинхронно. (используя 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>