首页载入正在写的html就内嵌三个网页，通过点击三个按钮切换内嵌的页面进行显示

载入正在写的html就内嵌三个网页，通过点击三个按钮切换内嵌的页面进行显示

时间: 2024-04-14 07:28:35 浏览: 162

你可以使用以下代码来实现在HTML页面内嵌三个网页，并通过点击按钮来切换显示它们： ```html <!DOCTYPE html> <html> <head> <style> iframe { display: none; } </style> </head> <body> <button onclick="showPage(1)">Page 1</button> <button onclick="showPage(2)">Page 2</button> <button onclick="showPage(3)">Page 3</button> <iframe id="page1" src="page1.html"></iframe> <iframe id="page2" src="page2.html"></iframe> <iframe id="page3" src="page3.html"></iframe> <script> function showPage(pageNumber) { // 隐藏所有的iframe var iframes = document.getElementsByTagName('iframe'); for (var i = 0; i < iframes.length; i++) { iframes[i].style.display = 'none'; } // 显示指定的iframe var iframe = document.getElementById('page' + pageNumber); if (iframe) { iframe.style.display = 'block'; } } </script> </body> </html> ``` 这段代码中，我们使用了三个按钮来切换显示内嵌的网页。每个按钮都有一个 `onclick` 事件，当按钮被点击时，它会调用 `showPage()` 函数，并传递相应的页面编号作为参数。`showPage()` 函数首先隐藏所有的 `<iframe>` 元素，然后根据传入的页面编号显示对应的 `<iframe>` 元素。你需要将 `page1.html`、`page2.html` 和 `page3.html` 替换为你要内嵌显示的网页的地址。确保这些网页在同一域名下，否则可能会出现安全限制。希望这可以帮助到你！如有更多问题，请随时询问。

阅读全文