如何使用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);
});

- pri0ritize

Answer 1

你应该创建一个活动类

CSS

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

JS

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

- Zoltan Toth

---

这是我目前使用的解决方法。我正在尝试看是否有更好的方法。 - pri0ritize

你说得对。我只是希望有一个更优雅的解决方案。如果没有，我会坚持我原来的想法！感谢您的帮助。 - pri0ritize

Answer 2

:active是一个CSS 伪类。您需要使用.active，这是正在添加到元素的class。

- zzzzBov

Answer 3

你希望按钮在被点击后保持活动类吗？（不确定是否还想允许再次取消选中（红色）？）无论如何...

CSS：

.uiButton {
   background-color: red;
}

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

Then....:

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

- EibergDK

Answer 4

你无法触发像 :active 这样的 CSS 伪选择器。我所知道的唯一选项是模拟它。

.uiButtonActive {
    background-color:blue;
}

请查看可工作的JSFIDDLE DEMO

- David