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...

Answer 2

这是一个完全按照您的描述执行操作的代码段。此解决方案使用jquery。查看下面的代码，随时询问是否有不明确的事情：）

＆＃13;

var colorChanged = false;
$('.change').click(function() {
  if(!colorChanged){
      $('.header').css('background-color','red'); 
      $('.sub-header').css('background-color','blue');
      colorChanged = true;
    } else {
      $('.header').css('background-color','transparent'); 
      $('.sub-header').css('background-color','transparent');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

＆＃13;

Answer 3

点击div.change将背景颜色分配给其他div $('.header').css("background-color","red");

$('.change').on('click',function(){ $('.header').css("background-color","red"); $('.sub-header').css("background-color","red"); })

演示：https://jsfiddle.net/y5tLzbsc/

Answer 4

你给他们两个班级活跃的＆＃39; 在你的CSS上

.header.active{
    background:blue;
 }
 .sub-header.active{
    background:red;
 }

和你的js：

document.querySelector('.change').onclick = function(){
   document.querySelector('.header').className += " active";
   document.querySelector('.sub-header').className += " active";
}

Answer 5

只需添加一个事件监听器即可。见demo：

＆＃13;

.header.color {
  background-color: red;
}
.sub-header.color {
  background-color: blue;
}

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 6

这可以使用HTML和CSS完成。没有必要使用先进或异国情调的东西。

checkbox成为点击输入，并在屏幕外隐藏。由于连接的label充当checkbox，因此它将成为您的输入按钮。 label替代原始的DIV。

＆＃13;

body {
  margin: 0;
  padding: 0;
}

#hidden_checkbox {
  display: block;
  position: absolute;
  top: -50px;
  right: 0;
}

#visible_label {
  display: block;
  height: 200px;
  cursor: pointer;
  background-color: rgb(200, 200, 200);
}

#hidden_checkbox:checked ~ div:nth-of-type(1) {
  background-color: rgb(0, 50, 0);
}

#hidden_checkbox:checked ~ div:nth-of-type(2) {
  background-color: rgb(0, 0, 50);
}

.header {
  height: 200px;
  background-color: rgb(0, 128, 128);
}

.sub-header {
  height: 200px;
  background-color: rgb(128, 0, 128);
}

＆＃13;

<input id="hidden_checkbox" type="checkbox">
<label id="visible_label" for="hidden_checkbox">Click this to change the background-color of the 2 headers.</label>
<div class="header">Header</div>
<div class="sub-header">Sub-header</div>

＆＃13;

当我按下另外一个div时，如何更改2个div的背景颜色？

6 个答案: