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

活动页面链接图标颜色

2 个答案: