<!DOCTYPE html> <html> <head> <style> .iframe-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 宽高比的占比 */ } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <button onclick="showPage(1)">Page 1</button> <button onclick="showPage(2)">Page 2</button> <button onclick="showPage(3)">Page 3</button> <div class="iframe-container"> <iframe id="page1" src="page1.html"></iframe> </div> <div class="iframe-container"> <iframe id="page2" src="page2.html"></iframe> </div> <div class="iframe-container"> <iframe id="page3" src="page3.html"></iframe> </div> <script> function showPage(pageNumber) { var iframes = document.getElementsByTagName('iframe'); for (var i = 0; i < iframes.length; i++) { iframes[i].style.display = 'none'; } var iframe = document.getElementById('page' + pageNumber); if (iframe) { iframe.style.display = 'block'; adjustIframeSize(iframe); } } function adjustIframeSize(iframe) { var container = iframe.parentNode; var containerWidth = container.offsetWidth; var containerHeight = container.offsetWidth * 9 / 16; // 16:9 宽高比 iframe.style.width = containerWidth + 'px'; iframe.style.height = containerHeight + 'px'; } </script> </body> </html>
时间: 2024-02-14 17:28:27 浏览: 147
HTML参考手册
这段代码是一个简单的网页,包含了三个按钮和三个iframe元素。每个按钮都有一个点击事件,当点击按钮时,会调用`showPage`函数来显示相应的页面。页面内容通过iframe元素来展示,每个iframe元素都有一个唯一的id和相应的src属性来加载不同的页面。
在JavaScript部分,`showPage`函数用于隐藏所有的iframe元素,并根据传入的pageNumber参数显示对应的页面。`adjustIframeSize`函数用于调整iframe元素的大小,以适应容器的宽度,并保持16:9的宽高比。
阅读全文