首页创建一个三层画布，每层画布都有一个自适应内嵌框，载入本页面会自动读取代码里写入的三个本地html，通过三个按钮控制哪个页面可见

创建一个三层画布，每层画布都有一个自适应内嵌框，载入本页面会自动读取代码里写入的三个本地html，通过三个按钮控制哪个页面可见

时间: 2024-04-14 08:28:37 浏览: 129

您可以使用HTML、CSS和JavaScript来创建这样的三层画布。下面是一个简单的例代码，实现了您的要求： ```html <!DOCTYPE html> <html> <head> <style> /* 设置画布容器的样式 */ .canvas { position: relative; width: 100%; height: 100vh; } /* 设置内嵌框的样式 */ .frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; /* 默认隐藏 */ } /* 设置按钮的样式 */ .btn { margin: 10px; } </style> </head> <body>  <div class="canvas">  <iframe class="frame" src="page1.html"></iframe>  <iframe class="frame" src="page2.html"></iframe>  <iframe class="frame" src="page3.html"></iframe> </div>  <button class="btn" onclick="showFrame(1)">显示页面1</button> <button class="btn" onclick="showFrame(2)">显示页面2</button> <button class="btn" onclick="showFrame(3)">显示页面3</button> <script> function showFrame(index) { var frames = document.getElementsByClassName('frame'); // 隐藏所有内嵌框 for (var i = 0; i < frames.length; i++) { frames[i].style.display = 'none'; } // 显示指定的内嵌框 frames[index - 1].style.display = 'block'; } </script> </body> </html> ``` 请将上述代码保存为一个HTML文件，并将`page1.html`，`page2.html`和`page3.html`这三个本地HTML文件放置在与该HTML文件相同的目录下。然后，您可以在浏览器中打开该HTML文件，点击不同的按钮来显示不同的页面。

阅读全文