HTML中的Tab點擊切換效果可以讓我們輕松地構建一個具有交互性的網站頁面。下面是一段演示該效果的代碼：

<style>
.tab {
display: none;
}
</style>
<ul>
<li onclick="showTab('tab1')">選項1</li>
<li onclick="showTab('tab2')">選項2</li>
<li onclick="showTab('tab3')">選項3</li>
</ul>
<p id="tab1" class="tab">這是選項1的內容</p>
<p id="tab2" class="tab">這是選項2的內容</p>
<p id="tab3" class="tab">這是選項3的內容</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>

代碼中首先定義了一個CSS樣式，將所有Tab的內容隱藏起來。接著使用HTML中的

和
• 標簽構建選項卡菜單，每個選項卡對應一個
• 元素，并使用onclick事件觸發showTab函數。showTab函數接收一個參數tabId，將該選項卡對應的內容元素顯示出來，同時隱藏其他選項卡的內容。 使用這段代碼，我們可以輕松地構建一個選項卡菜單，滿足各種需求。