ボタンまたはdivを押したときに背景色を変更する方法と、他のボタンを押した場合に最初の色を変更する方法はありますか？

Question

私はボタンのリスト持っている（またはDIV）：私は次持ちたい

<button type="button" class="btn" id="btn1">Details1</button> 
<button type="button" class="btn" id="btn2">Details2</button> 
<button type="button" class="btn" id="btn3">Details3</button> 
<button type="button" class="btn" id="btn4">Details4</button> 

：

私はそれが白に背景色の変更をだBTN1押してください。 btn2-btn2を押すと背景色が白くなり、背景色がbtn1に戻ります。

Answer 1

まだjQueryのを使用して別の解決策、：

HTML

<button type="button" class="btn" id="btn1" onClick="activate(this)">Details1</button> 
<button type="button" class="btn" id="btn2" onClick="activate(this)">Details2</button> 
<button type="button" class="btn" id="btn3" onClick="activate(this)">Details3</button> 
<button type="button" class="btn" id="btn4" onClick="activate(this)">Details4</button> 

JS

function activate(element){ 
    clearAll(); 
    $(element).addClass('active'); 
} 

function clearAll(){ 
    $('.btn').removeClass('active'); 
} 

https://jsfiddle.net/33eup40e/6/

とsolutio nはAngularJSを使用して：

JS

angularApp.controller('WhiteButtonCtrl', function($scope){ 
    $scope.buttons = [ 
    { id: 'btn1', value: 'Details1' }, 
    { id: 'btn2', value: 'Details2' }, 
    { id: 'btn3', value: 'Details3' }, 
    { id: 'btn4', value: 'Details4' } 
    ] 
    $scope.activeBtn = undefined; 

    $scope.activate = function(str){ 
    $scope.activeBtn = str; 
    } 
}); 

HTML

<div ng-controller="WhiteButtonCtrl"> 
    <button ng-repeat="button in buttons" ng-class="{ 'active' : activeBtn === button.id }" 
      ng-click="activate(button.id)" type="button" class="btn" id="{{button.id}}"> 
    {{button.value}} 
    </button> 
</div> 

https://jsfiddle.net/33eup40e/13/

Answer 2

背景色のクラスを作成します。 次に、すべてのdivにリスナーを添付します。クリックすると、その特別なクラスが追加されます。 divをクリックするたびに、そのクラスを他のdivから削除してから、選択したdivにクラスを適用する必要があります。

Answer 3

はdocument.getElementsByClassNameして、ボタンのコレクションを取得し、addEventListener .Alsoによってキャッチクリックすると、CSSの背景を変更することができます〜によってelement.style.background

<button type="button" class="btn" id="btn1">Details1</button> 
<button type="button" class="btn" id="btn2">Details2</button> 
<button type="button" class="btn" id="btn3">Details3</button> 
<button type="button" class="btn" id="btn4">Details4</button> 
<script> 
var btn = document.getElementsByClassName("btn");  
for(var i =0 ; i < btn.length;i++){   
     btn[i].addEventListener("click",function(){ 
      toggle(this.id);    
     });   
    } 
function toggle(id){ 
    for(var i =0 ; i < btn.length;i++){ 
    btn[i].style.background = ""; 
    } 
    document.getElementById(id).style.background = "white"; 
    } 
    </script> 

Answer 4

単にコードの2行はあなたの問題

$('.btn').click(function() { 
 
    $('.btn').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

.btn { 
 
    background-color: lightblue; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.btn.active { 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn" id="btn1">Details1</button> 
 
<button type="button" class="btn" id="btn2">Details2</button> 
 
<button type="button" class="btn" id="btn3">Details3</button> 
 
<button type="button" class="btn" id="btn4">Details4</button>