vcsode利用iframe框架实现左边导航栏,右边显示导航栏跳转的页面内容的代码
时间: 2024-03-19 18:45:01 浏览: 38
以下是一个简单的示例代码,使用iframe框架实现左侧导航栏,右侧显示导航栏跳转的页面内容:
```html
<!DOCTYPE html>
<html>
<head>
<title>示例代码</title>
<style type="text/css">
#sidebar {
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #eee;
padding: 10px;
box-sizing: border-box;
}
#content {
margin-left: 200px;
padding: 10px;
box-sizing: border-box;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="page1.html" target="page">页面1</a></li>
<li><a href="page2.html" target="page">页面2</a></li>
<li><a href="page3.html" target="page">页面3</a></li>
</ul>
</div>
<div id="content">
<iframe name="page" src="page1.html"></iframe>
</div>
</body>
</html>
```
在这个示例中,左侧导航栏使用一个固定宽度的 div 元素实现,右侧内容区域也是一个 div 元素。在右侧内容区域中,使用了一个 iframe 元素来显示跳转到的页面内容。每个导航栏链接指向的页面都在 iframe 中打开,并且指定了 iframe 的 name 属性为 "page",以便页面跳转后在同一个 iframe 中打开。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)