Question

当我点击一个链接时，它的颜色应该改变，它应该是相同的，直到我按下其他链接，如何使用＆＃34;活动＆＃34; ??我试过，当我点击它时它的颜色会发生变化，但它会获得原来的颜色！

    <html>
    <head>

    <style>

    a
    {
        display:block;
        height:5%;
        width:10%;
        background-color:#96C;  
        border: solid #96C 1px;
        margin-top:5px;
    }

    a:hover
    {
        background-color:#666;
    }

    a:active
    {
        background-color:#C99;
    }
    </style>


    </head>

    <body>

    <a href="#">Home</a>

    <a href="#">Sign in</a>
    <a href="#">Sign up</a>
    <a href="#">Exit</a>


    </body>
    </html>

Answer 1

:active伪选择器仅在单击链接的短暂时刻才有效。

You can read more here.

为了使链接保持相同的颜色，您应该使用class，您可以在您当前所在页面的链接上命名并实施它。

Here is a link to another thread asking essentially the same question.

Answer 2

dward回答的修改版本，包括您的样式：http://jsfiddle.net/zEwUY/1/

a:hover =将鼠标悬停在上面。

a:active =将鼠标放在链接上

a:visited =如果你曾经去过那里会是什么样子。

Answer 3

您可以使用javascript（在我的情况下为jQuery）将类分配给“活动”链接。 See this fiddle

HTML

<a href="#">Link 1</a>
<a href="#">Link 2</a>

CSS

a { color: green; }
.active { color: orange; }

的jQuery

$('a').on('click', function() {
   $('a').removeClass();
    $(this).addClass('active');
});

Answer 4

那不是什么：活跃的伪类是有意义的。你可以使用javascript。如果您使用jQuery，那么您可以执行以下操作：

var items = $("a");
items.on("click",function(){
  items.removeClass("active");
  $(this).toggleClass("active");
});

并添加“有效”css规则

a.active {
 background-color:#C99;
}

请参阅小提琴http://jsfiddle.net/QQb27/

如何保持活动链接的颜色不变，直到我按其他链接

4 个答案: