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>

如何使用CSS动态更改背景颜色

1 个答案: