HTML導(dǎo)航點(diǎn)擊切換是Web開(kāi)發(fā)中常用的功能之一。通過(guò)點(diǎn)擊導(dǎo)航菜單中的不同選項(xiàng)，實(shí)現(xiàn)頁(yè)面內(nèi)容的切換。下面介紹一段HTML導(dǎo)航點(diǎn)擊切換的代碼：

導(dǎo)航：

<ul>
<li onclick="showPage('page1')">頁(yè)面1</li>
<li onclick="showPage('page2')">頁(yè)面2</li>
<li onclick="showPage('page3')">頁(yè)面3</li>
</ul>
<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>
<script>
function showPage(pageId) {
var pages = document.getElementsByTagName('div');
for (var i = 0; i < pages.length; i++) {
if (pages[i].getAttribute('id') === pageId) {
pages[i].style.display = 'block';
} else {
pages[i].style.display = 'none';
}
}
}
</script>

上面的代碼中，首先使用ul和li標(biāo)簽創(chuàng)建了導(dǎo)航菜單，其中每個(gè)li標(biāo)簽都通過(guò)onclick屬性綁定了showPage函數(shù)，該函數(shù)會(huì)根據(jù)參數(shù)pageId來(lái)展示或隱藏對(duì)應(yīng)的div標(biāo)簽。 在下面的div標(biāo)簽中，分別設(shè)置了三個(gè)不同id、不同內(nèi)容的頁(yè)面，其中page1的div標(biāo)簽?zāi)J(rèn)展示，而page2和page3的div標(biāo)簽則被設(shè)置為style="display:none"，即初始時(shí)不展示。 最后，通過(guò)Javascript代碼實(shí)現(xiàn)showPage函數(shù)。該函數(shù)首先通過(guò)document.getElementsByTagName獲取到所有div標(biāo)簽，然后遍歷這些標(biāo)簽，如果當(dāng)前div標(biāo)簽的id與傳入的參數(shù)pageId相同，則將該標(biāo)簽展示（即style.display='block'），否則將該標(biāo)簽隱藏（style.display='none'）。這樣，點(diǎn)擊導(dǎo)航菜單中的不同選項(xiàng)，就能切換展示不同的頁(yè)面內(nèi)容了。 需要注意的是，在實(shí)現(xiàn)HTML導(dǎo)航點(diǎn)擊切換時(shí)，還可以使用第三方庫(kù)如jQuery等來(lái)簡(jiǎn)化代碼和操作。