如何使用onclick更改多个div的颜色

Question

假设我在一个页面中有 3 个跨度。单击它们，我正在展示一些东西。现在我想更改我选择的 div 的颜色。

<div class="step_wrapper">
   <div id="step_box1"> <span>Content of page 1</span>
   </div>
   <div id="step_box2"> <span>Content of page 2</span>
   </div>
   <div id="step_box2"> <span>Content of page 3</span>
   </div>
</div>

我试图这样做

 $("step_box1").toggle(function() {
   $(this).css("background-color", "red");
     }, 
     function() {
   $(this).css("background-color", "");
  });

 for 2nd div

$("step_box2").toggle(function() {
   $(this).css("background-color", "red");
     }, 
     function() {
   $(this).css("background-color", "");
  });

对于第三个

 $("step_box2").toggle(function() {
   $(this).css("background-color", "red");
     }, 
     function() {
   $(this).css("background-color", "");
  });

但我需要的是一次选择一个，选择哪个div变色，其他恢复正常

Answer 1

在设置一个“红色”之前，您必须将所有设置为正常颜色，如下所示：

$('.step_wrapper>div').css("background-color", "")
$(this).css("background-color", "red")