используйте кнопку в качестве фильтра и меняйте ее цвет, когда активен

Question

Я создаю небольшой сайт электронной коммерции для моей сестры, и у меня есть левая панель навигации, чтобы выбрать категорию одежды (все, брюки, рубашки и т. Д.). Вы можете видеть только одну категорию одновременно.

Чего я не могу добиться, так это изменить цвет фона выбранной категории, как показано на следующем рисунке (он темнее, потому что я использую: hover, но я хочу изменить цвет фона на выбранной кнопке, когда пользователь нажмите на нее)

Я думал добавить новый класс к выбранной кнопке, но как я могу удалить этот класс на ранее выбранной кнопке?

категории

<div class="side-filter">
    <button id="btn-all" class="btn" onclick="filterSelection('all')">Voir tout</button>
    <button id="btn-hauts" class="btn" onclick="filterSelection('hauts')">Hauts</button>
    <button id="btn-bas" class="btn" onclick="filterSelection('bas')">Bas</button>
    <button id="btn-robe" class="btn" onclick="filterSelection('robe')">Robes</button>
    <button id="btn-vestes" class="btn" onclick="filterSelection('vestes')">Vestes</button>
    <button id="btn-autres" class="btn" onclick="filterSelection('autres')">Autres</button>

статьи

 <div class="articles-container">
                    <a href="#" class="article" data-filter="hauts">
                        <img class="article-front" src="images/vitrine/femme/hauts/article_1/front.jpg" alt="jupe">
                        <img class="article-back" src="images/vitrine/femme/hauts/article_1/back.jpg" alt="jupe">
                        <h4 class="article-title">Blouse chic noire Christine Laure</h4>
                        <p class="prix">59,95€</p>
                    </a>
                    <a href="#" class="article" data-filter="hauts">
                        <img class="article-front" src="images/vitrine/femme/hauts/article_2/front.jpg" alt="jupe">
                        <img class="article-back" src="images/vitrine/femme/hauts/article_2/back.jpg" alt="jupe">
                        <h4 class="article-title">Blouse en voile imprimé Terracotta Diane Laury</h4>
                        <p class="prix">54,95€</p>
                    </a>

js

function filterSelection(appliedFilter){
    var articles = document.querySelectorAll(".article")
    for(i = 0 ; i < articles.length ; i++){
        if(appliedFilter == "all"){
            articles[i].classList.remove("hide-item")
        }
        else if(articles[i].getAttribute("data-filter") != appliedFilter){
            articles[i].classList.add("hide-item");
        }
        else{
            articles[i].classList.remove("hide-item")
        }
    }
}

Answer 1

Вместо добавления onClick для каждой кнопки вы можете определить прослушиватель щелчков в вашем файле js.

А в вашем CSS вам нужно определить выбранный класс.

let selectedFilterElement;

function initListener() {
  const buttons = document.querySelectorAll(".btn");
  buttons.forEach((button) => button.addEventListener('click', () => {
    console.log(button);
    if (selectedFilterElement) {
      selectedFilterElement.classList.remove('selected');
    }
    selectedFilterElement = button;
    selectedFilterElement.classList.add('selected');

    // filterSelection(button.dataset.filter);
  }));
}

initListener();

.selected {
  background: red;
}

<div class="side-filter">
  <button class="btn" data-filter="all">Voir tout</button>
  <button class="btn" data-filter="hauts">Hauts</button>
  <button class="btn" data-filter="bas">Bas</button>
</div>