[ixiz]

Добрый день!

Есть список ссылок:

<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);
});
});

Подскажите, пожалуйста, как можно решить эту проблему.