css - css中的背景正常和背景活动

Question

我在 CSS 中有以下代码：

#nav li a:active{
 background-color:brown;
}

#nav li a.index{background:purple;}
#nav li a.advertiser{background:red;}
#nav li a.publisher{background:green;}
#nav li a.new{background:blue;}
#nav li a.status{background:orange;}

#nav li a:hover {
 border-bottom:5px solid brown;
}

和 HTML

<ul id="nav">
 <li><a class="index"....
 <li><a class="advertiser"...
 <li><a class="publisher"...
 <li><a class="new"....
 <li><a class="status".....
</ul>

问题是当我点击它时，它会变成棕色，但不会保持棕色。我在哪里弄错了。

Answer 1

:active 状态只有在用户点击它时才会激活；单击完成后，锚点或按钮的活动状态不会持续存在。

如果您想在单击后保持锚点为棕色，可以在用户单击锚点时使用 jquery 推送特定类：

$('#nav a').on('click', function(e){
    e.preventDefault(); //?

    $('#nav a.active').removeClass('active');
    $(this).addClass('active');
})

Answer 2

:active 按下按钮或文本时会突出显示，您需要编写 jquery 代码来实现这一点。试试这个例子：

<ul>    
<li><a class="black classname" id="click">Home</a></li>
<li><a class="black" id="click">about</a></li>
<li><a class="black" id="click">services</a></li>
</ul>

CSS

.black{color:black}
.classname{color:red}

jQuery

$(document).ready(function(){

    $("a#click").click(function(){
        $("a").removeClass('classname')
        $(this).addClass('classname')
    });

});

演示 http://jsfiddle.net/XFYjz/