0

私は擬似クラスを使用していますが、jquery を使用して擬似クラスとやり取りする方法がわかりません。アイテムにクラスを追加するようなものだと思いますが、私の例を見ると、どうすればいいのかわかりません。いろいろ調べましたが、私の見方が間違っているだけかもしれません。

ボタン ( <span>) をクリックすると、:active、:before、active::before などを使用して変化します。

そのボタンを押した後もクリックしたままにしたい。(別の<span>ものがクリックされるまで)

    .lbButton { background-color:#eaa33d; font-family: 'Open Sans', sans-serif; font-size:18px; text-decoration:none; color:#000; position:relative; padding:10px 20px; padding-right:50px; background-image: url('../images/nav_background1.png'); border-radius: 5px; box-shadow: inset 0px 1px 0px #ede8ba, 0px 5px 0px 0px #ab6c11, 0px 10px 5px #999; margin-left: 30px;cursor: pointer; }
    .lbButton:active {  top:3px;  box-shadow: inset 0px 1px 0px #ede8ba, 0px 2px 0px 0px #ab6c11, 0px 5px 3px #999; }
    .lbButton::before { background-color:#4e3108; background-image:url(http://heritageinncharlottesville.com/images/down_arrow.png); background-repeat:no-repeat; background-position:center center; content:""; width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-9px; border-radius: 50%; box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066; }
    .lbButton:active::before { top:50%; margin-top:-12px; box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29; }

jQueryを使用してこれを行う方法は何ですか?

ボタンをクリックすると、ボタンが押されたように見えます。マウスを離した後、次のマウスが押されるまで、その状態をアクティブに保ちたいと思います。

注: このボタンをオンラインにして、css をコピーしました。配色に合わせて修正しました

4

2 に答える 2

2

jQueryトグルクラスで処理する方がよいでしょう。アクティブな疑似クラスは、このタイプの機能向けではありませんでした。

var spans = $('span.lbButton');

spans.on('click', function(){
    spans.removeClass('active');
    $(this).addClass('active');
});

前のスニペットを考慮して、適切なスタイル定義を class に適用しますactive。

于 2012-10-18T17:12:57.740 に答える
1

別のスタイルがクリックされるspanまでスタイルを固定したいので、アクティブなときに必要なすべてのスタイルを持つ のクラスを作成し、アクティブでないときのデフォルト クラスを作成することをお勧めします。spanspanspan

active-spanここでは、との 2 つのクラスがあると仮定しますdefault-span。あなたはCSSを知っているようですので、それらを定義できます。

jQuery:

$('span').click(function() {
    $('span').removeClass('active-span');
    $(this).addClass('active-span');
});​

フィドル: http://jsfiddle.net/gromer/ZX7yg/

于 2012-10-18T17:16:12.747 に答える