Добрый день!
Есть список ссылок:
<ul class="nav-list">
<li data-filter="red" class="nav-list__item" id="red">Красный</li>
<li data-filter="green" class="nav-list__item" id="green">Зеленый</li>
<li data-filter="blue" class="nav-list__item" id="blue">Синий</li>
<li data-filter="gray" class="nav-list__item" id="gray">Сброс</li>
</ul>
Нужно, чтобы в активном (нажатом) состоянии к каждой ссылке применялся свой собственный стиль.
Проблема: если указать для активной ссылки класс 'active', то все активные ссылки будут иметь один стиль, а это меня не устраивает.
При клике на новую ссылку, класс 'active' удаляется у старой ссылки и добавляется к новой. Это меня устраивает.
navItems.forEach(item => {
item.addEventListener('click', event => {
const filterValue = event.target.dataset.filter;
navItems.forEach(item => {
item.classList.remove('active');
event.target.classList.add('active');
});
});
});
Если вместо класса 'active' передавать значение dataset посредством переменной filterValue, к ссылкам применяются те классы, которые нужны. Это хорошо.
Но при этом класс у старой ссылки не удаляется, и когда происходит клик по новой ссылке, обе ссылки становятся активными. Это плохо.
navItems.forEach(item => {
item.addEventListener('click', event => {
const filterValue = event.target.dataset.filter;
item.classList.remove(filterValue);
event.target.classList.add(filterValue);
});
});
Подскажите, пожалуйста, как можно решить эту проблему.
