Question

我有一个大的div容器（id = first-container）。在那个容器内，有四个较小的div。最初，在这四个蓝色DIV中有里面的图像。

我还有另外两个div在容器外面。他们的目的是将整个第一个容器交换到另一个容器。将有三个具有三个不同ID的容器：零容器，第一容器，第二容器。

div {
  outline: solid 2px red;
}

.container {
  background-color: green;
  width: 200px;
  height: 200px;
}

.inside {
  display: inline-flex;
  background-color: blue;
  width: 40%;
  height: 40%;
  margin: 8px;
}

.flip-div {
  display: inline-flex;
  width: 60px;
  height: 40px;
}

<div id="first-container" class="container">
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
  <div class="inside"></div>
</div>
   
   
<div id="next-container" class="flip-div">Previous</div>
<div id="previous-container" class="flip-div">Next</div>

问题是，如何在容器（previous-container和next-container）之外创建这些div，如果按下它们，它会交换主要大容器，而不重新加载站点？

我可以简单地将上一个容器div和next-container div放入，将其发送到其他.html页面，其他.html页面已经有另一个容器，但是我想这样做而不需要重新加载网站，最好是用一些幻灯片动画。

我很挣扎，因为我对编码很陌生。还没有学过JavaScript。

非常感谢任何帮助，谢谢。

Answer 1

您必须使用javascript与DOM元素进行交互。尝试将此块放在HEAD标记内，这将使您听到按钮的单击事件。

<script type='text/javascript'>
$('#next-container').on('click',function(){
alert('Swap to next container');
});
$('#previous-container').on('click',function(){
alert('Swap to previous container');
});
</script>

我强烈建议您开始阅读您将在Web开发中使用的3个主要工具（HTML，CSS和JavaScript）：

HTML定义网页内容
CSS指定网页布局
JavaScript来编制网页的行为

交换DIV容器而不重新加载页面

1 个答案: