按钮:使用JavaScript和CSS激活

Question

单击时,尝试使一个简单的按钮处于活动的不同样式.我正在使用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/

附加说明
功能目标是让多个按钮具有相同的类,但每个按钮调用不同的功能.我调用了函数,只是按下第一次按下时按钮保持活动状态,然后再次按下时处于非活动状态

Answer 1

你接近于正确行事,你使用检查构建的机制来查看你的元素是否有active类很好但jQuery有一个toggleClass()函数允许你只写下面的内容:

$('.btn').click(function() {
    $(this).toggleClass('active');
});

然后在你的CSS中,而不是样式化psuedo :active你将使用类名,而不是这样:

.btn.active {
    background: #cecece;
    text-decoration: none;
}

你也想要:active从你的CSS中删除选择器,因为你将不再需要它 :)

正如dfsq所指出的,保留:activepsuedo选择器有一定的价值:

我只是认为控制元素的活动状态(:active)很重要.例如,如果没有它,按钮看起来是相同的,如果它被按下但没有被点击(在mouseup之前的mouseout).用户体验稍微好一点:活跃.但也许我太挑剔了

因此,您可能希望将选择器修改为:

.btn.active, .btn:active {
    background: #cecece;
    text-decoration: none;
}

因为这会影响.active和:active国家.