单击时,尝试使一个简单的按钮处于活动的不同样式.我正在使用
HTML来布局按钮,CSS用于样式化,并希望使用一些
JavaScript来实现.
在环顾四周并发现有许多不同的方法,例如使用CheckBox通过纯CSS或jQuery或JavaScript制作按钮,我觉得JavaScript是我所关注的最接近的方式.
HTML
<button type="button" class="btn" id="btn1">Details</button>
CSS
.btn {
background: #3498db;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 2px 2px 2px 2px;
text-decoration: none;
height: 30px;
width: 70px;
margin-top: 5px;
margin-bottom: 5px;
display: block;
}
.btn:active {
background: #cecece;
text-decoration: none;
}
JavaScript的
$('.btn').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
这是一个jsfiddle链接：http://jsfiddle.net/w5h6rffo/
附加说明
功能目标是让多个按钮具有相同的类,但每个按钮调用不同的功能.我调用了函数,只是按下第一次按下时按钮保持活动状态,然后再次按下时处于非活动状态
解决方法
你接近于正确行事,你使用检查来构建你的元素是否具有活动类的机制很好但是jQuery有一个
toggleClass()函数,它允许你只写下面的内容：
$('.btn').click(function() {
$(this).toggleClass('active');
});
然后在你的CSS中,而不是样式化psuedo：active你将使用类名,而不是这样：
.btn.active {
background: #cecece;
text-decoration: none;
}
您还需要从CSS中删除：active选择器,因为您不再需要它了:)
正如dfsq所指出的,保留：active psuedo选择器有一定的价值：
I just think that active state (:active) for the control elements is
important. For example,without it button will look the same if it is
pressed but not clicked (mouSEOut before mouseup). UX is slightly
better with :active.But maybe I’m too picky
因此,您可能希望将选择器修改为：
.btn.active,.btn:active {
background: #cecece;
text-decoration: none;
}
因为这会影响.active和：active状态.
