無効にするボタンを有効にするhtml5/css/javascript

Question

私は電卓を作った。私は次のウェブページにアップロードしました。

www.vipulshree.com

私はそれをクリックすることで、ボタンを強調表示し、別のボタンがクリックされたときに、それからハイライトを削除したいです。次のボタンをクリックすると、色/無効/強調表示が変わり、前のボタンが正常に戻ります。私はネット上でこれを検索して何も見つけられませんでした。私は必死になる助けてください。

ありがとうございます。

Answer 1

CSS疑似セレクタ:focusを使用してください。現在フォーカスを持っている要素と一致します。はクリックでクラス.focusedを追加し、他のすべての要素にそれを削除するには、ボタン

---

JavaScriptを使用では動作しないようです。すべてのボタンの共通の親に対してイベントデリゲーションを使用します（このコードでは、#containerと仮定しています）。

<script type="text/javascript"> 
    setFocus = function(e) { 
     if (document.getElementsByClassName('focus')[0]) document.getElementsByClassName('focus')[0].className = ''; 
     if (e.target.tagName.toLowerCase() == 'button') { 
      e.target.className = 'focus'; 
     } 
    }; 
    document 
     .getElementById('container') 
     .onclick = setFocus; 
</script> 

私のHTMLマークアップはこのように見えた：あなたは、ボタンのクラスを定義して、あなたがその色を変更することができますクリックイベントを使用して、いつできる

<div id="container"> 
    <button>1</button> 
    <button>2</button> 
    <button>3</button> 
    <button>4</button> 
    <button>5</button> 
</div> 

Working Example

Answer 2

あなたは任意のボタンをクリックして、 "前へ"という変数で保存します。

他のボタンをクリックすると、保存されたボタン変数 の色が再び変更され、その変数に現在のボタンが割り当てられます。

var previous; 
document.getElementsByClassName("className").onclick = function(){ 
    // change the color of the previous element 
    previous = this; 
    // change the color of this button 
} 

Answer 3

は、ここではそれだけで、DOM準備ローダとハイライト効果を行うためのCSSクラスのためのjQueryを使用しています、少しjsfiddle実施例です。

http://jsfiddle.net/t6bJ3/

var buttons = document.getElementsByTagName('button'), 
     buttonsLength = buttons.length, 
     selected, 
     i = 0, 
     reset = function() { 
      for (i = 0; i < buttonsLength; i++) buttons[i].className = ''; 
     }, 
     highlight = function(ev) { 
      reset(); 
      ev.target.className = 'highlight'; 
     }; 

    for (; i < buttonsLength; i++) buttons[i].onclick = highlight;