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; } 

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