[英]Background normal and background active in css
I have the following code in CSS: 我在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;
}
and HTML 和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>
The thing is that when i click on it, it transforms to brown but it doesn't stay brown. 问题是,当我单击它时,它会变成棕色,但不会保持棕色。 Where am i mistaking can't realize. 我在哪里误会无法实现。
the :active state will only be active when the user clicks on it; :active状态仅在用户单击时才处于活动状态; anchor or buttons' active states don't persists after the click is finished. 单击完成后,锚点或按钮的活动状态不会持续。
If you want to keep the anchor to brown after a click, you can use jquery to push a specific class when the user clicks on an anchor: 如果要在单击后使锚点保持棕色,则可以在用户单击锚点时使用jquery推送特定的类:
$('#nav a').on('click', function(e){
e.preventDefault(); //?
$('#nav a.active').removeClass('active');
$(this).addClass('active');
})
:active
will give the highlights when the button or text is pressed, you need to code jquery to achieve this. :active
将在按下按钮或文本时突出显示,您需要编写jquery来实现。 Try this example: 试试这个例子:
<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 的CSS
.black{color:black}
.classname{color:red}
Jquery jQuery的
$(document).ready(function(){
$("a#click").click(function(){
$("a").removeClass('classname')
$(this).addClass('classname')
});
});
Demo http://jsfiddle.net/XFYjz/ 演示http://jsfiddle.net/XFYjz/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.