CODEWITHSUNDEEP
javascriptcss
user4082764
user4082764

Reputation:

Active page link icon color

Hi everyone i have one question about active page link color.

I am using this javascript code for active page link.

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

this is CSS code 

.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;
    }

and this is HTML

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

In CSS code .icon color is main color. When user click about link then it needs to change text color color:blue; to color:#ffffff; but not changing. What can i do for changing icon color ?

Upvotes: 0

Views: 112

Answers (2)

Sagar
Sagar

Reputation: 1

You can use jquery and do this:

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

Upvotes: 0

Vladu Ionut
Vladu Ionut

Reputation: 8183

you could use the CSS :active Selector 

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

Upvotes: 0

Related Questions