Question

我看到一些非常相似的问题浮出水面，但未能找到我正在寻找的答案。我已经确定了解决方法，但想知道执行任务的正确方法。

我想要的是单击按钮并使活动状态保持持久。下一次单击将切换状态，这是所需的。我真正需要知道的是如何解决uiButton：活动状态。

HTML：

<input type='button' class='uiButton' id='testbutton' value='testValue'>

CSS：

.uiButton{
    background-color: red;
}

.uiButton:active{
    background-color:blue;
}

的Javascript / jQuery的：

$('.uiButton').click(function() {
    $(this).toggleClass(//active state);
});

Answer 1

您应该创建一个活动类

的 CSS 的

.uiButton:active, .active { background-color:blue; }

的 JS 的

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

Answer 2

:active是一个css pseudo-class。您希望.active是要添加到元素中的class。

Answer 3

您希望按钮在单击后保持活动类吗？（不确定你是否想让它再次被解锁（红色）？）..无论如何......

CSS：

.uiButton {
   background-color: red;
}

.uiButton-active, .uiButton:hover {
   background-color: blue;
}

然后....：

$('.uiButton').unbind('click').click(function() {
  $(this).attr('class', 'uiButton-active');
});

Answer 4

您无法触发:active之类的css伪选择器。我知道的唯一选择就是模拟这个

.uiButtonActive {
    background-color:blue;
}