活动页面链接图标颜色

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');
});