Question

基本上，我有一个名为PF1.1.html的页面，在示例中我将为您打开该页面，我将为您提供该页面，而PF1.html则是在拆分屏幕时打开的页面。屏幕应该是。基本上，单击时在右上角具有两个矩形的按钮应该执行类似拆分屏幕并在PF1.html中打开下一个窗口的操作。我不知道该怎么做，然后再使用同一按钮将其重新合并。我得到了一些有关如何拆分屏幕的代码，但我不知道如何正确使用它。

PF1.html：https://codepen.io/Fropis/pen/oOrrQb

PF1.1.html：https://codepen.io/Fropis/pen/ZZddVP

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Split screen on click</title>
  <style>
  *{
    margin: 0px;
    padding: 0px;
  }
  #container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
  }
  #child{
    width: 200px;
    height: 200px;
    border: 2px solid #000000;
    border-radius: 3px;
  }
  #clicker{
    margin-top: 20px;
  }
  </style>
</head>
<body>
<div id="container">
  <div id="child"></div>
</div>
<button id='clicker' onclick="spliter()">Click me to create a new element</button>
<script>
function spliter(){
  var sec = document.createElement("DIV");
  sec.setAttribute("id", "child");
  document.getElementById("container").appendChild(sec);
}
</script>
</body>
</html>

拆分屏幕并在拆分时更改页面，然后再次合并屏幕

0 个答案: