當按下按鈕或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/

以及使用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中刪除該類，然后將其應用於選定的div。

Answer 3

通過document.getElementsByClassName獲取按鈕集合，並通過addEventListener捕獲單擊。也可以通過element.style.background更改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

只需兩行代碼即可解決您的問題

 $('.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>