如何使用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上的標記方式，您需要清理代碼