如何使用CSS動態更改背景顏色

Question

我已經建立了一種方法，當單擊一個按鈕時，它會更改其背景顏色並重置其他三個按鈕的顏色。 button1的方法如下所示

<script>
    function changeBttn1() {
        document.getElementById("bttn1").style.backgroundColor = '#add8e6';
        document.getElementById("bttn2").style.backgroundColor = '#D3D3D3';
        document.getElementById("bttn3").style.backgroundColor = '#D3D3D3';
        document.getElementById("bttn4").style.backgroundColor = '#D3D3D3';
    }...

我也希望能夠使適用於每個按鈕的Div出現，而其他人按下相同的按鈕隱藏。 Div使用Class = Collapse，它對應於Bootstrap.css中的Display：None，但是我想將其更改為從與按鈕相同的方法運行。 如何使用CSS做兩個事件？

Answer 1

請這樣非常簡單

 $('.my-btn').on('click',function(){ var colorval=$(this).attr('color'); $('.my-btn').css('background-color', 'grey'); $(this).css('background-color', colorval); }); 

 button{ background-color:grey; padding:10px; border:1px solid #000000; color:#ffffff; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="button-wrapper"> <button class="my-btn" color="red">Red</button> <button class="my-btn" color="green">Green</button> <button class="my-btn" color="purple">Purple</button> </div>