首页我不要跳转页面，我需要把现有的html页面都汇总至同一个html文件中，通过左侧导航栏点击，页面右侧展示不同html页面

我不要跳转页面，我需要把现有的html页面都汇总至同一个html文件中，通过左侧导航栏点击，页面右侧展示不同html页面

时间: 2024-03-02 08:49:05 浏览: 23

好的，那您需要使用iframe标签来实现左侧导航栏点击，右侧展示不同的html页面。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏</title> <style> /* 左侧导航栏样式 */ nav { position: fixed; width: 200px; height: 100%; background-color: #f1f1f1; padding: 20px; box-sizing: border-box; } nav ul { list-style: none; padding: 0; margin: 0; } nav ul li { margin-bottom: 10px; } /* 右侧内容区样式 */ .content { margin-left: 220px; padding: 20px; } iframe { width: 100%; height: 100%; border: none; } </style> </head> <body> <nav> <ul> <li><a href="#page1" onclick="document.getElementById('content').src='page1.html'">页面1</a></li> <li><a href="#page2" onclick="document.getElementById('content').src='page2.html'">页面2</a></li> <li><a href="#page3" onclick="document.getElementById('content').src='page3.html'">页面3</a></li> </ul> </nav> <div class="content"> <iframe id="content"></iframe> </div> </body> </html> ``` 在这个例子中，我们使用了iframe标签来展示不同的html页面，通过点击左侧导航栏中的超链接，触发onclick事件，将对应的html页面加载到iframe之中。您只需要将“页面1”、“页面2”、“页面3”分别改为您需要展示的页面名称即可。