新闻资讯

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻资讯列表

js怎么实现点击导航栏切换页面功能,js点击li

发布时间:2023-08-08 07:55:34

js怎样实现点击导航栏切换页面功能

可使用 JavaScript 来实现点击导航栏切换页面的功能。下面是一个简单的示例:
首先,在 HTML 中创建导航栏和对应的页面内容区域:
```html


Home Page

About Page

Contact Page

```
接下来,在 JavaScript 中编写 `showPage` 函数来切换页面:
```javascript
function showPage(pageId) {
// 隐藏所有页面
var pages = document.getElementsByClassName('page');
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
// 显示选中的页面
var page = document.getElementById(pageId);
page.style.display = 'block';
}
```
最后,通过 CSS 来设置页面的默许显示和样式:
```css
.page {
display: none;
}
#home {
display: block;
}
```
这样,当点击导航栏的链接时,对应的页面就会显示出来。