javascript - 当我按下 1 个其他 div 时，如何更改 2 个 div 的背景颜色？

Question

当按下 div(更改)时，如何使 2 个 div(标题和子标题)改变颜色？

子标题将更改为另一种颜色，与标题颜色不同。

<div class="change">
  Click this to change the background-color of the 2 headers.
</div>

<div class="header>
  Header
</div>

<div class="sub-header">
sub-header
</div>

Answer 1

你可以这样处理它......

为您想要的每种新背景颜色创建一个新类:

.header {
  background: grey;
}

.header-alt {
  background: lightblue;
}

.sub-header {
  background: lightblue;
}

.sub-header-alt {
  background: grey;
}

然后使用 jQuery toggleClass单击 div change

添加/删除这些类

$(".change").click(function() {
  $('.header').toggleClass("header-alt");
  $('.sub-header').toggleClass("sub-header-alt");
});

示例

$(".change").click(function() {
  $('.header').toggleClass("header-alt");
  $('.sub-header').toggleClass("sub-header-alt");
});

body {
  width: 600px;
  margin: 0 auto;
  color: #FFF;
  font-family: sans-serif;
  font-size: 20px;
}

div {
  padding: 20px;
}

.change {
  background: black;
  cursor: pointer;
}

.header {
  background: grey;
}

.header-alt {
  background: lightblue;
}

.sub-header {
  background: lightblue;
}

.sub-header-alt {
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="change">
  Click this to change the background-color of the 2 headers
</div>

<div class="header">
  Header
</div>

<div class="sub-header">
  sub-header
</div>

Codepen if you prefer...