HTML界面切換是一種常見(jiàn)的動(dòng)態(tài)頁(yè)面效果，它能夠讓用戶(hù)在同一頁(yè)面中瀏覽不同的內(nèi)容。下面是一個(gè)簡(jiǎn)單的HTML界面切換代碼示例：

首先，我們需要在HTML代碼中定義一些不同的頁(yè)面元素。這些元素可以是不同的div容器，也可以是其他HTML標(biāo)簽。

<div id="page1">
<h1>頁(yè)面1</h1>
<p>這是頁(yè)面1的內(nèi)容。</p>
</div>
<div id="page2" style="display:none">
<h1>頁(yè)面2</h1>
<p>這是頁(yè)面2的內(nèi)容。</p>
</div>
<div id="page3" style="display:none">
<h1>頁(yè)面3</h1>
<p>這是頁(yè)面3的內(nèi)容。</p>
</div>

接下來(lái)，我們需要為頁(yè)面中的一個(gè)元素（如按鈕或鏈接）添加一個(gè)事件監(jiān)聽(tīng)器，以便在用戶(hù)點(diǎn)擊時(shí)切換到其他頁(yè)面。在例子中，我們使用一個(gè)簡(jiǎn)單的JavaScript函數(shù)來(lái)實(shí)現(xiàn)這個(gè)目的。

<button onclick="showPage('page2')">頁(yè)面2</button>
<button onclick="showPage('page3')">頁(yè)面3</button>
<script>
function showPage(pageName) {
var pages = document.querySelectorAll('div[id^="page"]');
for (var i = 0; i< pages.length; i++) {
if (pages[i].id === pageName) {
pages[i].style.display = 'block';
} else {
pages[i].style.display = 'none';
}
}
}
</script>

在這個(gè)JavaScript函數(shù)中，我們首先使用document.querySelectorAll方法獲取所有id屬性以"page"開(kāi)頭的div元素，這些元素就是我們定義的頁(yè)面元素。接著使用一個(gè)for循環(huán)逐個(gè)檢查這些元素，如果當(dāng)前元素的id等于傳入的頁(yè)面名稱(chēng)參數(shù)，則將該元素的display屬性設(shè)置為"block"，否則將display屬性設(shè)置為"none"，以實(shí)現(xiàn)顯示或隱藏元素的效果。

當(dāng)用戶(hù)點(diǎn)擊頁(yè)面2或頁(yè)面3的按鈕時(shí)，該JavaScript函數(shù)將被調(diào)用，并顯示或隱藏對(duì)應(yīng)的頁(yè)面元素，從而實(shí)現(xiàn)HTML界面切換的效果。