如何保持:单击元素后的活动css样式

Question

我使用锚点作为我的网站导航.

<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>

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

我想知道如何在点击之后保持div元素样式保持在:active状态,直到我点击另一个导航栏项目,那么怎么做呢？

Answer 1

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

Answer 2

如果你想让你的链接看起来像它们是:active类，你应该定义:visited相同的类:active，如果你有一个链接，.example那么你可以这样做：

a.example:active, a.example:visited {
/* Put your active state style code here */ }

链接访问伪类用于选择访问过的链接，如名称所示。