如何使用CSS或Angular 6替换HTML中链接的图标/图像onclick？

Question

我的代码如下

  <ul style="list-style:none">
        <li><i class="fa fa-hospital-o first" aria-hidden="true"></i><a href="#">arrows</a></li>
        <li><i class="fa fa-cogs" aria-hidden="true"></i><a href="#">battery</a></li>
        <li><i class="fa fa-university" aria-hidden="true"></i><a href="#">bell</a></li>
        <li><i class="fa fa-industry" aria-hidden="true"></i><a href="#">bicycle</a></li>
        <li><i class="fa fa-music" aria-hidden="true"></i><a href="#">circle</a></li>
        <li><i class="fa fa-users" aria-hidden="true"></i><a href="#">deaf</a></li>
    </ul>

因此，单击链接时，我需要更改链接中内容和图标的颜色。

CSS：

ul li:active {
 color:green;
} 

它不起作用。 选择特定列表项时，我需要更改颜色。 谁能帮我这个忙吗？

Answer 1

检查此解决方案，希望对您有帮助：

 $(document).ready(function(){ $("ul > li").click(function(){ $("ul > li").removeClass("active"); $(this).addClass("active"); }); }); 

 ul{ list-style:none; } ul li { position: relative; } li a { text-decoration: none; } li ai { position: absolute; left: 0px; } li a { padding-left: 32px; } li.active a { color: green !important; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="active"><a href="#"><i class="fas fa-hospital first" aria-hidden="true"></i>arrows</a></li> <li><a href="#"><i class="fas fa-cogs" aria-hidden="true"></i>battery</a></li> <li><a href="#"><i class="fas fa-university" aria-hidden="true"></i>bell</a></li> <li><a href="#"><i class="fas fa-industry" aria-hidden="true"></i>bicycle</a></li> <li><a href="#"><i class="fas fa-music" aria-hidden="true"></i>circle</a></li> <li><a href="#"><i class="fas fa-users" aria-hidden="true"></i>deaf</a></li> </ul> 

Answer 2

你把我当成物品吗？ 多数民众赞成在很奇怪，但瓦特/我也没有得到你想要的清单，但瓦特/

<ul>
<li><a class="something" href="#">arrows</a></li>
</ul>

.something:active {
    background-color: white;
}

再次，我没有得到这个问题，或者您的问题似乎是您在html上的标记方式，您需要清理代码