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。

Answer 3

按document.getElementsByClassName获取按钮集合并按addEventListener点击。也可以按element.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>

Answer 4

只需两行代码即可解决您的问题

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在按下按钮或div时更改背景颜色，如果按下另一个，第一个颜色会改变颜色？

4 个答案: