单击元素后如何保持 :active css 样式 [英] How to keep :active css style after clicking an element

问题描述

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

<a href='#abouts'><div class='naviitem about'>关于
</a><a href='#workss'><div class='navitem作品'>作品

</a>

CSS

#nav {左边距:50px；边距顶部:50px；文本转换:大写；}.navitem {背景:#333；白颜色;宽度:230px；高度:50px；字体大小:25px；行高:50px；左边距:20px；-webkit-user-select:无；-moz-user-select:无；用户选择:无；边距顶部:10px；}.about:悬停{背景:#cc00ff；}.about:active {背景:#ff00ff；颜色:#000；宽度:250px；}.works:悬停{背景:#0066FF；}.作品:活动{背景:#0099cc；颜色:#000；宽度:250px；}

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

解决方案

Combine JS &CSS :

按钮{/* 第一个状态 */}按钮:悬停{/* 悬停状态 */}按钮:活动{/* 点击状态 */}按钮.活动{/* 点击状态后 */}jQuery('按钮').click(function(){jQuery(this).toggleClass('active');});

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

#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?

解决方案

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

这篇关于单击元素后如何保持 :active css 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！