html中如何将不同的网页嵌入到侧边栏菜单框架中,实现点击不同的参数显示不同的内容
时间: 2024-02-19 22:02:36 浏览: 86
手机端点击滑动隐藏侧边栏菜单.zip
要将不同的网页嵌入到侧边栏菜单框架中,可以使用HTML中的iframe标签。你可以使用如下的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>侧边栏菜单框架示例</title>
<style>
/* 外部框架样式 */
#sidebar {
float: left;
width: 200px;
background-color: #f1f1f1;
height: 100%;
}
/* 菜单样式 */
.menu {
padding: 10px;
}
/* 嵌入的网页样式 */
.content {
padding: 10px;
height: 100%;
}
</style>
</head>
<body>
<div id="sidebar">
<div class="menu">
<ul>
<li><a href="#" onclick="showPage('page1.html')">页面1</a></li>
<li><a href="#" onclick="showPage('page2.html')">页面2</a></li>
<li><a href="#" onclick="showPage('page3.html')">页面3</a></li>
</ul>
</div>
</div>
<div class="content">
<iframe id="pageFrame" src="page1.html" width="100%" height="100%"></iframe>
</div>
<script>
function showPage(pageUrl) {
document.getElementById("pageFrame").src = pageUrl;
}
</script>
</body>
</html>
```
这个示例中,我们使用了一个外部框架和一个菜单框架,菜单框架中包含了三个链接,分别对应三个不同的网页。当用户点击某个链接时,通过JavaScript调用showPage函数,将对应的网页嵌入到content div中的iframe标签中。这样,用户就可以在侧边栏中点击不同的参数,显示不同的内容了。
阅读全文