要實現通過導航欄切換頁面，可以結合HTML和JavaScript來實現。
首先，你需要一個包含導航鏈接的導航欄。例如：
<nav><ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
然后，在每個頁面的相應位置設置對應的目標元素。注意，這些目標元素需要有唯一的ID。例如：
<section id="home"><!-- Home 頁面內容 -->
</section>
<section id="about">
<!-- About 頁面內容 -->
</section>
<section id="contact">
<!-- Contact 頁面內容 -->
</section>
接下來，你可以使用JavaScript來為導航鏈接添加點擊事件，并在點擊時將對應的目標元素顯示出來，同時隱藏其他不相關的目標元素。以下是示例代碼：
// 獲取導航鏈接和目標元素const navLinks = document.querySelectorAll('nav ul li a');
const sections = document.querySelectorAll('section');
// 給導航鏈接添加點擊事件
navLinks.forEach(link => {
link.addEventListener('click', () => {
// 隱藏所有目標元素
sections.forEach(section => {
section.style.display = 'none';
});
// 顯示對應的目標元素
const target = link.getAttribute('href').substring(1);
document.getElementById(target).style.display = 'block';
});
});
上述代碼會給每個導航鏈接添加點擊事件，點擊時會根據鏈接中的`href`屬性值獲取目標元素的ID，并將其顯示出來，同時隱藏其他目標元素。
通過以上步驟，你就可以實現在導航欄上點擊鏈接來切換頁面顯示不同的內容。記得將示例代碼適當修改以適應你的具體需求和樣式。
