Активный значок ссылки на страницу

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 Selector

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

Answer 2

Вы можете использовать JQuery и сделать это:

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