首页html中使用iframe点击左边菜单右边内容切换

html中使用iframe点击左边菜单右边内容切换

时间: 2023-11-16 18:03:56 浏览: 134

在使用iframe实现左边菜单右边内容切换时，我们可以将菜单和内容分别放在一个父级页面(parent)和一个子级页面(child)中，通过在父级页面中添加菜单，然后通过iframe标签嵌入子级页面来实现。以下是一个基本的示例代码：父级页面(parent)的HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>父级页面</title> <style> .menu { float: left; width: 200px; height: 100%; background-color: #f2f2f2; } iframe { float: left; width: calc(100% - 200px); height: 100%; border: none; } </style> </head> <body> <div class="menu"> <ul> <li><a href="javascript:void(0);" onclick="changeFrameSrc('content1.html')">菜单1</a></li> <li><a href="javascript:void(0);" onclick="changeFrameSrc('content2.html')">菜单2</a></li> <li><a href="javascript:void(0);" onclick="changeFrameSrc('content3.html')">菜单3</a></li> </ul> </div> <iframe id="iframe" src="content1.html"></iframe> <script> function changeFrameSrc(src) { var iframe = document.getElementById('iframe'); iframe.src = src; } </script> </body> </html> ``` 在上面的代码中，我们首先定义了一个菜单和一个iframe标签，通过CSS样式实现左右布局。在菜单中，我们通过a标签的onclick事件来切换iframe的src属性值，从而实现切换内容。子级页面(content1.html, content2.html, content3.html)的HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子级页面</title> </head> <body> <h1>内容区域1</h1> </body> </html> ``` 在子级页面中，我们只需要编写需要展示的内容即可。当我们在父级页面中点击菜单时，父级页面会切换子级页面的src属性值，从而展示不同的内容。

阅读全文