javascript - 使用jQuery按下后如何保持按钮处于活动状态

Question

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

我想要的是单击按钮并使活动状态保持不变。下一次单击将切换状态，这是所需的。我真正需要知道的是如何处理 uiButton:active 状态。

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

score 11 · Accepted Answer

您应该创建一个活动课程

CSS

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

JS

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

score 1 · Accepted Answer

1

:active是一个 css伪类。您想要添加到元素中.active的类。

于 2012-11-16T20:18:18.087 回答

score -1 · Accepted Answer

您希望按钮在单击后保持活动类吗？（不确定您是否要允许再次松开（红色）？）..无论如何...

CSS：

.uiButton {
   background-color: red;
}

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

然后....：

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

score -1 · Accepted Answer

您不能触发像:active. 我知道的唯一选择是模拟这个

.uiButtonActive {
    background-color:blue;
}

查看有效的JSFIDDLE DEMO

4 回答 4