クリック（Javascript）時にボタンの色を変更するには？

Question

私は2つのボタンを持っています。クリックすると、ページが更新されない限り、灰色から黒色に変わり、黒色になります。または他のボタンをクリックします。他のボタンがクリックされた場合、私はそれを黒に変え、最初のボタンをグレーに戻したいと思います。私はJSがこれのための最善の方法だと思っていますが、どうやってそれを行うのか分かりません。

HTML：：

<a id="button"></a> 
<a id="button"></a> 

CSS：事前に

#button { 
display:inline-block; 
    height:10px; 
    width:10px; 
    border-radius:10px; 
    background-color:gray; 
} 

多くのおかげでここ

は、以下の私のコードの一部です。

Answer 1

ID名ではなくクラス名に変更し、再利用してはならない、彼らはまだにJavascriptのロジックを適用することが私たちのために、それぞれ固有のID名が必要になりますそれら。

HTML：

<a id="button1" class="button"></a> 
<a id="button2" class="button"></a> 

CSS：

.button 
      { 
       display:inline-block; 
       height:10px; 
       width:10px; 
       border-radius:10px; 
      } 

Javascriptを：

document.getElementById("button1").style.backgroundColor ="gray"; 
document.getElementById("button2").style.backgroundColor ="gray"; 


document.getElementById("button1").onclick = function(){ 
      this.style.backgroundColor ="black"; 
      document.getElementById("button2").style.backgroundColor ="gray"; 
     }; 

document.getElementById("button2").onclick = function(){ 
      this.style.backgroundColor ="black"; 
      document.getElementById("button1").style.backgroundColor ="gray"; 
     }; 

Answer 2

背景を設定したクラスを追加するには、jquery addClass関数を使用します。 クラスは、ページが読み込まれるまで残ります。

CSSアクティブなプロパティはアクティブですが、ボタンでは機能しません。なぜなら、アクティブなプロパティはクリックボタンを放すと消えるからです。たぶんボタンとして装飾されたタグを使用すると動作するかもしれませんが、アクティブ状態を失ったら消えてしまいます。

Answer 3

jQueryを使用すると、簡単に実行できます。

$('#buttons .item').on("click",function(){ 
 
    $("#buttons .item.active").removeClass('active'); 
 
    $(this).addClass("active"); 
 
});

button{ 
 
    color: white; 
 
} 
 
.item{ 
 
    background-color: gray; 
 
} 
 
.active{ 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="buttons"> 
 
    <button class="item">Button 1</button> 
 
    <button class="item">Button 2</button> 
 
    <button class="item">Button 3</button> 
 
</div>

Answer 4

ここで私はノーJavaScriptで手早く例だ - 代わりに私が「確認」されている1に応じてスタイルされている2つのラジオボタンを使用していますが。

http://codepen.io/capitalq/pen/gLWLMK

.button { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    border: 0; 
 
    background: gray; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 10px; 
 
    outline: none; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
} 
 

 
.button:checked { 
 
    background: black; 
 
}

<input type="radio" class="button" name="buttons" id="button1" /> 
 
<input type="radio" class="button" name="buttons" id="button2" />

Answer 5

<style media="screen"> 
    #buttonA, #buttonB { 
     display: inline-block; 
     height: 10px; 
     width: 10px; 
     border-radius: 10px; 
     background-color: gray; 
    } 
</style> 

<a id="buttonA"></a> 
<a id="buttonB"></a> 

<script type="text/javascript"> 

    var buttonA = document.querySelector('#buttonA'); 
    var buttonB = document.querySelector('#buttonB'); 

    var changeColour = function (e) { 

     if (e.target === buttonA) { 
      buttonA.style.backgroundColor = 'black'; 
      buttonB.style.backgroundColor = 'gray'; 
     } 

     if (e.target === buttonB) { 
      buttonB.style.backgroundColor = 'black'; 
      buttonA.style.backgroundColor = 'gray'; 
     } 

    }; 

    buttonA.addEventListener('click', changeColour, false); 
    buttonB.addEventListener('click', changeColour, false); 

</script> 

Answer 6

HTML button要素があります。だから、あなたはあなたのページ上のボタンをマークアップしたい場合は、あなたが本当に使用するべきである：ここで

<button type="button"></button> 

はJavaScriptで<button>とclassListを使用してのアプローチです：

var buttons = document.getElementsByTagName('button'); 
 

 
function paintItBlack() { 
 

 
    for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].classList.remove('clicked'); 
 
    } 
 

 
    this.classList.add('clicked'); 
 
} 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].addEventListener('click',paintItBlack,false); 
 
}

.clicked { 
 
color: rgb(255,255,255); 
 
background-color: rgb(0,0,0); 
 
}

<button type="button">Button A</button> 
 
<button type="button">Button B</button>

Answer 7

JavaScriptは現時点では不要です。このコードは、.cssファイルまたはhtmlファイルの "style"タグで使用します。マウスが上にあるときとクリックしたときに黒くなります。

a:hover 
    { 
     background-color:black; 
    } 
    a:target 
    { 
     background-color:black; 
    }