HTML5是當今最流行的Web標準之一，它用于構建Web應用程序和網站，并提供了許多功能和工具來增強用戶體驗和頁面設計。其中一個重要的功能是同頁面切換。
同頁面切換是指在不刷新頁面的情況下，通過JavaScript來更改頁面的內容和布局。這可以提高用戶體驗，使頁面看起來更流暢和漂亮。下面是一個使用HTML5同頁面切換代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>同頁面切換示例</title>
<style>
/* 樣式定義 */
#home {
display: block;
}
#about, #contact {
display: none;
}
</style>
<script>
function switchPage(page) {
// 隱藏所有頁面
document.getElementById("home").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
// 根據參數顯示相應的頁面
document.getElementById(page).style.display = "block";
}
</script>
</head>
<body>
<!-- 頁面切換按鈕 -->
<button onclick="switchPage('home')">首頁</button>
<button onclick="switchPage('about')">關于</button>
<button onclick="switchPage('contact')">聯系我們</button>
<!-- 頁面內容 -->
<div id="home">
<h1>歡迎來到我的網站！</h1>
<p>這里是我的個人主頁，希望你會喜歡它！</p>
</div>
<div id="about">
<h1>關于我</h1>
<p>我是一名Web開發者，熱愛編程和設計。</p>
</div>
<div id="contact">
<h1>聯系我</h1>
<p>如果你有任何問題或建議，請發送郵件至：xyz@gmail.com。</p>
</div>
</body>
</html>以上代碼定義了三個頁面：首頁、關于和聯系我們。在頁面開始時，所有頁面都隱藏，只有點擊對應的按鈕時才會切換到相應的頁面。這是通過JavaScript中的switchPage函數實現的。
通過HTML5同頁面切換代碼，可以讓Web應用程序和網站更具交互性和動態性，提高用戶體驗和頁面設計的質量。
上一篇html5向右滾動代碼