javascript - 单击时更改多个div的css样式？

Question

我有 3 个盒子，红色的一开始应该比其他盒子大（通过 css）。现在，当我单击绿色或黄色框时，红色会变小，与单击前的绿色或黄色相同。而被点击的会得到红色的 CSS 样式（大小）。我想用 JQuery 做，但不知道怎么做？

.r1, .r2, .r3{
      width: 80px;
      height: 80px;
      margin: 40px;
      float: left;
    }
    
    .r1{
        background-color: red;
        position: inherit;
            transform: scaleY(1.2);
            transform: scale(1.2);
            transform-origin: center;
            border: 2px solid #15dc6e;
    }
    .r2{
        background-color: green;
    }
    .r3{
        background-color: yellow;
    }

<div class="content">
  <div class="r1"></div>
  <div class="r2"></div>
  <div class="r3"></div>
</div>

小提琴：https ://jsfiddle.net/cwx3ukra/16/

标签： javascriptjqueryhtmlcss

Answer 1

试试这个：

代码笔： https ://codepen.io/samandalso/pen/qKrLLM

$(function() {
    $('.content div').on('click', function(){
      $('.content div').not($(this)).removeClass('scaled');
      $(this).toggleClass('scaled');
    });
});