Javascript 当按下按钮或div时，如何更改背景色，如果按下另一个按钮，第一个按钮将更改回原色？

我有按钮列表（或div）：

Details1
细节2
细节3
细节4

我想要下一个：

---

当我按下btn1时，它的背景色变为白色。当我按下btn2时，btn2背景色变为白色，btn1背景色变回正常状态。

使用背景色创建一个类。 然后将一个侦听器附加到每个div，单击将向其添加该特殊类。

---

每次单击div时，都需要从任何其他div中删除该类，然后将该类应用于所选div。

另一种解决方案，仍然使用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>

<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>

以及使用AngularJS的解决方案：

JS

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

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

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

<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>

<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>

{{button.value}}

---

通过

文档获取按钮集合。getElementsByClassName

和catch click by

addEventListener

。还可以通过

元素.style.background

更改css背景

<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>

Details1
细节2
细节3
细节4
var btn=document.getElementsByClassName（“btn”）；
对于（变量i=0；i

只要两行代码就可以解决您的问题

$（'.btn'）。单击（函数（）{
$（'.btn'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
.btn{
背景颜色：浅蓝色；
边界：无；
光标：指针；
}
.btn.active{
背景色：白色；
}

细节1
细节2
细节3
Details4
我不使用jQuery。只有js和角js。怎么做？我刚刚更新了答案，加入了AngularJS解决方案示例。