HTML中的Tab點(diǎn)擊切換效果可以讓我們輕松地構(gòu)建一個(gè)具有交互性的網(wǎng)站頁(yè)面。下面是一段演示該效果的代碼：

<style>
.tab {
display: none;
}
</style>
<ul>
<li onclick="showTab('tab1')">選項(xiàng)1</li>
<li onclick="showTab('tab2')">選項(xiàng)2</li>
<li onclick="showTab('tab3')">選項(xiàng)3</li>
</ul>
<p id="tab1" class="tab">這是選項(xiàng)1的內(nèi)容</p>
<p id="tab2" class="tab">這是選項(xiàng)2的內(nèi)容</p>
<p id="tab3" class="tab">這是選項(xiàng)3的內(nèi)容</p>
<script>
function showTab(tabId) {
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].style.display = 'none';
}
document.getElementById(tabId).style.display = 'block';
}
</script>

代碼中首先定義了一個(gè)CSS樣式，將所有Tab的內(nèi)容隱藏起來(lái)。接著使用HTML中的

和
• 標(biāo)簽構(gòu)建選項(xiàng)卡菜單，每個(gè)選項(xiàng)卡對(duì)應(yīng)一個(gè)
• 元素，并使用onclick事件觸發(fā)showTab函數(shù)。showTab函數(shù)接收一個(gè)參數(shù)tabId，將該選項(xiàng)卡對(duì)應(yīng)的內(nèi)容元素顯示出來(lái)，同時(shí)隱藏其他選項(xiàng)卡的內(nèi)容。 使用這段代碼，我們可以輕松地構(gòu)建一個(gè)選項(xiàng)卡菜單，滿(mǎn)足各種需求。