Wie ändere ich die Hintergrundfarbe, wenn die Taste oder div gedrückt wird und wenn eine andere gedrückt wird, ändert die erste die Farbe zurück?

Question

Ich habe Liste der Tasten (oder div):

wenn ich btn1 es Hintergrundfarbe wird weiß drücken:

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

ich als nächstes haben wollen. Wenn ich btn2 - btn2 drücke, wird die Hintergrundfarbe weiß und die btn1 Hintergrundfarbe wird wieder normal.

Answer 1

Eine andere Lösung, noch mit 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/

Und ein solutio n mit 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

Erstellen Sie eine Klasse mit Hintergrundfarbe. Dann fügen Sie jedem div einen Listener hinzu, bei Klick fügen Sie diese spezielle Klasse hinzu. Jedes Mal, wenn Sie auf div klicken, müssen Sie diese Klasse aus einem anderen div entfernen, danach wenden Sie die Klasse auf das ausgewählte div an.

Answer 3

Ihre Button-Sammlungen Holen von document.getElementsByClassName und fangen Klick von addEventListener .Auch können CSS-Hintergrund ändern von 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

einfach zwei Codezeile würde für Ihr Problem umgehen

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