Question

我一直在寻找一些代码，只需点击一下按钮就可以将一个div放在另一个div之前。

以下是HTML代码：

<a href="#" class="button">Toggle</a>

<div class="red">
    Red Content
</div>

<div class="blue">
    Blue Content
</div>

和CSS代码：

.red {
position: relative;
top: 100px;
left: 0px;
width: 200px;
height: 100px;
background-color: red;
color: white;
text-align: center;
line-height: 100px;
}

.blue {
position: absolute;
top: 127px;
left: 8px;
width: 200px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}

我无法弄清楚如何点击切换按钮以使“红色”div显示在“蓝色”div上。然后在另一次点击时，再次在“红色”div上显示“蓝色”div。

这是jquery代码：

$(".red").click(function(){
$(".red").toggle();
$(".blue").hide();
});

感谢任何和所有帮助！

Answer 1

一个<div>必须在起点处不可见，并且在点击时都是toggled。

＆＃13;

$(".button").click(function() {
  $(".blue, .red").toggle();
});

＆＃13;

.red {
  position: relative;
  top: 100px;
  left: 0px;
  width: 200px;
  height: 100px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
  display:none;
}
.blue {
  position: absolute;
  top: 127px;
  left: 8px;
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" class="button">Toggle</a>

<div class="red">
  Red Content
</div>

<div class="blue">
  Blue Content
</div>

＆＃13;

JavaScript / JQuery将div带到另一个前面

1 个答案: