单击元素后如何保持 :active css 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7738219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep :active css style after clicking an element
提问by Alpha Chung
I use anchor as my site navigation.
我使用锚作为我的网站导航。
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
我想知道如何在单击后保持 div 元素样式保持 :active 状态，直到我点击另一个导航栏项目，那么该怎么做呢？
回答by Ansyori
Combine JS & CSS :
结合 JS 和 CSS：
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
回答by mqchen
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
本:target-伪选择为这些类型的问题而提出：http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
所有现代浏览器都支持它。为了让一些 IE 版本理解它，你可以使用像Selectivizr这样的东西
Here is a tab examplewith :target-pseudo selector.
回答by a.b
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
您可以使用一点 Javascript 来添加和删除导航项的 CSS 类。首先，创建一个将应用于活动元素的 CSS 类，将其命名为：“.activeItem”。然后，为每个导航按钮的 onclick 事件添加一个 javascript 函数，该函数会将“activeItem”类添加到激活的一个，并从其他按钮中删除...
It should look something like this: (untested!)
它应该看起来像这样：（未经测试！）
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
回答by Aaron Fitch
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
我想到了。简单、有效的无jquery
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
我们将使用一个隐藏的复选框。
此示例包括一个“点击时 - 关闭点击'悬停/活动'状态”
--
——
To make content itself clickable:
使内容本身可点击：
HTML
HTML
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
CSS
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
To make button change content:
要使按钮更改内容：
HTML
HTML
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
CSS
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
Hope it helps!!
希望能帮助到你！！
回答by Aaron Fitch
If you want to keep your links to look like they are :activeclass, you should define :visitedclass same as :activeso if you have a links in .examplethen you do something like this:
如果你想让你的链接看起来像它们是:active类，你应该定义:visited类，:active如果你有一个链接，.example那么你做这样的事情：
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Classis used to select visited links as says the name.
该链接访问伪类用于选择访问链接的名字说。
