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

:activecss疑似クラスです。要素に追加されているクラスが.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

のような css 疑似セレクターをトリガーすることはできません:active。私が知っている唯一のオプションは、これをシミュレートすることです

.uiButtonActive {
    background-color:blue;
}

動作中のJSFIDDLE DEMOをチェックしてください

4 に答える 4