小编axc*_*ink的帖子

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

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