可以使用 JavaScript 来实现点击导航栏切换页面的功能。下面是一个简单的示例:
首先,在 HTML 中创建导航栏和对应的页面内容区域:
Home PageAbout PageContact Page
接下来,在 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; }
这样,当点击导航栏的链接时,对应的页面就会显示出来。