html页面我设置了一个侧边导航栏,怎么样通过点击导航栏实现右边页面的改变
时间: 2023-11-17 08:06:47 浏览: 128
html+jquery+CSS实现最简单的右侧导航栏效果
5星 · 资源好评率100%
您可以通过以下步骤实现:
1. 在 HTML 页面中,给导航栏添加一个点击事件,比如:
```html
<ul>
<li><a href="#" onclick="changePage('page1.html')">Page 1</a></li>
<li><a href="#" onclick="changePage('page2.html')">Page 2</a></li>
<li><a href="#" onclick="changePage('page3.html')">Page 3</a></li>
</ul>
```
2. 在 JavaScript 中,编写 `changePage()` 函数,用于改变右边页面的内容。例如:
```javascript
function changePage(pageUrl) {
// 获取右边的页面元素
var pageElement = document.getElementById('page');
// 设置页面的 URL
pageElement.src = pageUrl;
}
```
3. 在 HTML 页面中,添加一个 `iframe` 元素作为右边的页面容器。例如:
```html
<iframe id="page" src="page1.html"></iframe>
```
这样,当用户点击导航栏中的链接时,`changePage()` 函数就会被调用,从而改变右边页面的内容。
阅读全文