選択時にCSS要素を変更する

Question

これを行う簡単な方法はわかりますが、見つけられないようです。私はリストを持っているドロップダウンボックスを持っています。リストの項目のいずれかにマウスを移動すると、枠線で囲まれます。これは素晴らしい。

私が欲しいのは、ユーザーがこのリストから項目を選択したときです。背景色を#dddに自動的に変更します。

ユーザがリストから別のアイテムを選択すると、他のアイテムアイテムの背景が選択解除されます。

私は 'hi'というクラスを持っています。

私のCSSはそうのようなものです：

#changer a{ 
    padding:3px; 
    border: solid 1px #fff;  
} 
#changer a.hi{ 
    background:#ddd; 
} 
#changer a:hover{ 
    border: solid 1px #ddd; 
    text-decoration:none; 
} 

私はこのスクリプトを追加しましたが、それは単にリストから項目を選択しますが、それは他のものを選択解除しません。背景色を切り替えるだけです。

ご迷惑をおかけいたします。そして、あなたがリンクは相互排他的なチェックボックスのように動作する場合

$("a").click(function() { 

    // remove existing "hi"s on other links 
    $("a.hi").not(this).removeClass("hi"); 

    // toggle "hi" on this 
    $(this).toggleClass("hi"); 
}); 

（1つだけ選択することができますが、また、現在の選択を解除することができます）：

乾杯、

ジョニー

Answer 1

これを試してみてください上記のコードを使用しますが、ラジオボタンのように動作させたい場合（1つしか選択できませんが、現在の選択を解除することはできません）、代わりに次のコードを使用してください。

$("a").click(function() { 

    // remove existing "hi"s on other links 
    $("a.hi").not(this).removeClass("hi"); 

    // add "hi" to this 
    if (!$(this).hasClass('hi')) 
     $(this).addClass("hi"); 
}); 

Answer 2

あなたはこのように、この書き込みに:activeを使用することができます。

#changer a:active{ 
    background:#ddd; 
}