活動頁面鏈接圖標顏色

Question

大家好，我有一個關於活動頁面鏈接顏色的問題。

我正在使用此javascript代碼進行活動頁面鏈接。

$(".header a").filter(function(){
    return this.href == location.href.replace(/#.*/, "");
}).addClass("header_active_link");

這是CSS代碼

.header{
    position: relative;
    height: 100%;
    float: right;
    width: auto;
    margin: 0;
    right: 0;
    top: 0;
    }
.icon{
   margin:0;
   margin-right:10px;
   padding:13px;
   height:23px;
   width:23px;
   color:blue;
   overflow:hidden;
   float:left;
   font-size:24px;
}
.icon-compass-2:before {
   content: "\e08b";
}
.header_active_link{
   color: #ffffff;
    }

這是HTML

<div class="header">
  <a href="<?php echo $main_url.'about/'; ?>"><div class="icon icon-compass-2"></div></a>
</div>

在CSS代碼中， .icon顏色是主要顏色。 當用戶單擊關於鏈接時，則需要更改文本顏色color:blue; color:#ffffff; 但沒有改變。 如何更改圖標顏色？

Answer 1

您可以使用CSS：active選擇器

.header a:active { 
   color: #ffffff;
}

Answer 2

您可以使用jquery並執行以下操作：

$('.header a').click(function () {
    $(this).addClass('.header_active_link');
});