如何更改数据过滤器的li:active属性的颜色

Question

如何更改数据过滤器的li:active属性的颜色？

我希望活动过滤器在选中时为红色。我的代码不起作用，请帮助找到一个有效的解决方案。这是我的HTML和CSS:

.portfolio-filter li {
display: inline-block;
font-size: 14px;
color: #212121;
font-weight: 500;
margin-right: 46px;
text-transform: uppercase;
cursor: pointer;
}
.portfolio-filter li:hover {
color: red;
}
.portfolio-filter li:active {
color: red;
}
.portfolio-filter li:last-child {
margin-right: 0;
}

<div class="portfolio-section">
<ul class="portfolio-filter controls text-center">
<li class="control" data-filter="all">All</li>
<li class="control" data-filter=".aerial">Aerial</li>
<li class="control" data-filter=".corporate">Corporate</li>
<li class="control" data-filter=".events">Events</li>
<li class="control" data-filter=".outdoor">Outdoor</li>
<li class="control" data-filter=".portraits">Portraits</li>
<li class="control" data-filter=".studio">Studio</li>
</ul>
</div>

Answer 1

这就是您需要的吗？

const portfolioFilter = document.querySelector('.portfolio-filter');
const controls = document.querySelectorAll('.control');
portfolioFilter.addEventListener('click', (e) => {
const control = e.target.closest('.control');
if (!control) return;
controls.forEach((currentControl) => currentControl.classList.remove('active'));
control.classList.add('active');
});

.portfolio-section {
padding-top: 120px;
}
.portfolio-filter {
list-style: none;
margin-bottom: 46px;
padding: 0 15px;
}
.portfolio-filter li {
display: inline-block;
font-size: 14px;
color: #212121;
font-weight: 500;
margin-right: 46px;
text-transform: uppercase;
cursor: pointer;
}
.portfolio-filter li:hover {
color: red;
}
.portfolio-filter li:active {
color: red;
}
.portfolio-filter li:current {
color: red;
}
.portfolio-filter li:last-child {
margin-right: 0;
}
.portfolio-filter li.active {
color: red;
}

<div class="portfolio-section">
<ul class="portfolio-filter controls text-center">
<li class="control" data-filter="all">All</li>
<li class="control" data-filter=".aerial">Aerial</li>
<li class="control" data-filter=".corporate">Corporate</li>
<li class="control" data-filter=".events">Events</li>
<li class="control" data-filter=".outdoor">Outdoor</li>
<li class="control" data-filter=".portraits">Portraits</li>
<li class="control" data-filter=".studio">Studio</li>
</ul>
</div>