两个div点击第二个div让第二个div内容显示在第一个div上,第一个div的内容显示在第二个div上

可以使用jQuery来实现这个功能，具体代码如下：

HTML代码：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

CSS代码：

.box1, .box2 {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

.box1 {
  margin-bottom: 20px;
}

jQuery代码：

$(document).ready(function() {
  $(".box2").click(function() {
    var box2Content = $(this).html();
    $(this).html($(".box1").html());
    $(".box1").html(box2Content);
  });
});

说明：

1. 当页面加载完成后，绑定`.box2`的`click`事件。
2. 在`.box2`的`click`事件中，获取`.box2`的内容，并将其赋值给`box2Content`变量。
3. 将`.box1`的内容赋值给`.box2`，使用`.html()`方法。
4. 将`box2Content`变量的值赋值给`.box1`，使用`.html()`方法。

相关问题

两个div点击第二个div让第二个div内容显示在第一个div上

可以使用JavaScript来实现这个功能。首先需要给两个div添加点击事件的监听器，当第二个div被点击时，获取它的内容并将其设置为第一个div的innerHTML。

HTML代码：

<div id="div1"></div>
<div id="div2">这是第二个div的内容</div>

JavaScript代码：

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

div2.addEventListener("click", function() {
  div1.innerHTML = div2.innerHTML;
});

当第二个div被点击时，它的内容将被设置为第一个div的innerHTML，从而显示在第一个div上。

div设置两个盒子如何让第二个盒子居中在第一个盒子内

可以使用CSS的flex布局来实现这个效果。具体步骤如下：

1. 在HTML中，创建一个父级div，里面包含两个子div。

<div class="parent">
  <div class="child1">第一个盒子</div>
  <div class="child2">第二个盒子</div>
</div>

2. 在CSS中，设置父级div的样式为flex布局，并使用justify-content和align-items属性将子div居中。

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 父级div的高度 */
  border: 1px solid #ccc;
}

.child1 {
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.child2 {
  width: 100px;
  height: 100px;
  background-color: #00f;
}

这样就可以让第二个盒子在第一个盒子内水平和垂直居中了。需要注意的是，父级div要设置一个固定的高度，否则无法垂直居中。