js如何实现点击导航栏切换页面功能

可以使用 JavaScript 来实现点击导航栏切换页面的功能。下面是一个简单的示例：

首先，在 HTML 中创建导航栏和对应的页面内容区域：

<nav>
<ul>
<li><a href="#" onclick="showPage('home')">Home</a></li>
<li><a href="#" onclick="showPage('about')">About</a></li>
<li><a href="#" onclick="showPage('contact')">Contact</a></li>
</ul>
</nav>
<div id="home" class="page">Home Page</div>
<div id="about" class="page">About Page</div>
<div id="contact" class="page">Contact Page</div>

接下来，在 JavaScript 中编写 showPage 函数来切换页面：

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 来设置页面的默认显示和样式：

.page {
display: none;
}
#home {
display: block;
}

这样，当点击导航栏的链接时，对应的页面就会显示出来。