2

ボタンをクリックしたときに、別のボタンがクリックされるまでボタンがその色のままになるようにするにはどうすればよいですか？

明確にするために、テキストボックスがあると想像してください。クリックすると、好きなように境界線を追加できますinput:focus{border:#000}。入力のフォーカスが失われたり、別のテキストボックスをクリックしたりすると、境界線のプロパティがデフォルトに戻ります。

ボタンでこれをどのように達成しますか。：afterか何かを使う必要があるような気がします。

私のコード

button.top_bar {
    background-color:#E3E3E3;
    border:#DCDCDC 1px solid;
    border-radius:3px;
    height:40px;
    display:block;
    color:#000;
    postion:relative;
    display:block;
    float:left;
    top:5;
    text-transform:capitalize;
    font-family:Arial;
    font-weight:bold;
    cursor:pointer;
    margin-left:15px;
}

button.top_bar:hover {
   border:#9F9F9F 1px solid;
}

button.top_bar:focus {
    border:#9F9F9F 1px solid;
}
4

2 に答える 2

2

私がこれを行うことを考えることができる唯一の方法は、jQueryまたはある種のJavascriptを使用することです。これが私がそれを行う方法です：私はそれをクラスを介して制御します（それを「.selectedBorder」と呼びましょう）。次に、クリックして、持っているすべてのボタンをつかみ、すべてのボタンの境界線をオフにしてから、クリックしたボタンに追加します。次に例を示します。

//first you grab the click event for the button(s)
$("#buttons").click(function(){

    //we remove all the borders from all the buttons
    $("#buttons").removeClass("selectedBorder");

    //Now we add the border to the button that's been clicked
    $(this).addClass("selectedBorder");

});

それでうまくいくはずです。これをjavascriptタグまたは外部ファイルに追加してインクルードするだけで、準備は完了です。お役に立てば幸いです。

于 2011-10-23T03:49:10.247 に答える
1

テキスト入力とは異なり、一部のブラウザはボタン要素がクリックされたときにフォーカスを付与しないようです。ボタン要素に属性onclick="this.focus（）"を追加して、問題を強制します。jQueryは必要ありません:-)

于 2013-08-15T03:27:38.630 に答える