html - 如何更改数据过滤器的 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>

标签： htmlcss

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>