html - 使用 CSS 单击更改列表的图标

Question

我的标签菜单有一个 NavList，如下所示:

<ul>
  <li><a href="#1"><span></span></a></li>
  <li><a href="#2"><span></span></a></li>
  <li><a href="#3"><span></span></a></li>
  <li><a href="#4"><span></span></a></li>
</ul>

现在在 css 中，我将 background-img 带到空范围内，以便在我的菜单中有一个图标。单击链接时如何更改图标？

a:active 仅针对点击。我需要类似 a:target 的东西。这可能吗？

非常感谢!

Answer 1

目前无法使用纯 CSS 将某些元素“永久”标记为事件/为它们指定特定类。

执行此操作的一个选项是使用 Javascript/jQuery，如下所示:

<ul class="tab-menu">
  <li><a href="#1"><span></span></a></li>
  <li><a href="#2"><span></span></a></li>
  <li><a href="#3"><span></span></a></li>
  <li><a href="#4"><span></span></a></li>
</ul>

<script>
    jQuery(document).ready(function(){
        $('ul.tab-menu li').click(e){
            $('ul.tab-menu li').removeClass('active');
            $(this).addClass('active');
        }
    });
</script>