画面をクリックした後、ボタンステイをハイライト表示する方法は？

Question

私は、モーダルウィンドウに2つのボタンを追加しました.1つのボタンは強調表示されていますが、いつでも画面上をクリックすると正常になります。どのように強調表示させることができますか？

<button type="button" class="btn btn-default">New</button> 
<button type="button" class="btn btn-default">Used</button> 
<button type="button" class="btn btn-default" autofocus>Any</button> 

---

Answer 1

HTML：：

<button id="highlight" ..... ></button> 

CSS：

#highlight, #highlight:hover, #highlight:active, #highlight:focus { 
    color://any-color; 
    // more css 
} 

注：疑似クラスはホバーこれが使用している、フォーカス、アクティブ 私は、次のコードを使用していますbuのイベントが発生したときにボタンの同じスタイルを変更しないようにするトンが発生する。

Answer 2

モーダル内の最初の自動焦点設定は常に機能しません。あなたはjavascriptを介してボタンに焦点を当てるべきです。 http://getbootstrap.com/javascript/#modalsを参照してください。 $('#myModal').on('shown.bs.modal', function() { $('#button3').focus() })

:focusおよび:activeは、要素の状態に応じて特定のCSSルールを定義できる擬似クラスです。ブートストラップ.activeと.focusのクラスは、:focusと:activeと同じCSSスタイルです。 したがって、常にハイライトしたいボタンに.activeまたは.focusを追加してください。

<button type="button" class="btn btn-default active">Any</button> 

Answer 3

あなたは、画面の別の部分をクリックすると、ボタンが強調表示さ滞在したい場合は、CSSは唯一の方法は本当にありません

var yourbuttons = document.getElementsByClassName('highlight-hover'); 
for (var i = yourbuttons.length - 1; i >= 0; i--) { 
    var currentbtn; 
    yourbuttons[i].onclick=function(){ 
     if(currentbtn){ 
      currentbtn.classList.remove("highlight"); 
      } 
      this.classList.add("highlight"); 
      currentbtn=this; 
    } 
}; 

を試してみてください。 ：アクティブまたは：要素がアクティブに長くないか焦点。ここ

が、私が仕事https://jsfiddle.net/mksty8eq/

で退屈だから、あなたが一つのボタンをクリックすると、あなたがしたいと思われるものの作業バージョンだ時に自分のスタイルを削除注力します別のボタンをクリックするまでハイライトされたままになります

Answer 4

だから、あなたはほしいですかJSFiddle？あなたのボタンにフォーカスpseudoclassesして、必要な背景色にそれらを変更：アクティブと：

CSS

.active { 
    color: #F00; 
} 

JSは

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