HTML5可以讓網(wǎng)頁更加生動多彩，選項卡是其中一個常見的元素。通過選項卡，用戶可以切換不同的內(nèi)容，更加方便地瀏覽網(wǎng)頁。
以下是一個簡單的HTML5選項卡代碼：
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')">選項卡1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">選項卡2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">選項卡3</button>
</div>
<div id="tab1" class="tabcontent">
<h3>選項卡1</h3>
<p>這是選項卡1的內(nèi)容。</p>
</div>
<div id="tab2" class="tabcontent">
<h3>選項卡2</h3>
<p>這是選項卡2的內(nèi)容。</p>
</div>
<div id="tab3" class="tabcontent">
<h3>選項卡3</h3>
<p>這是選項卡3的內(nèi)容。</p>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>可以看到，這個代碼包含一個標(biāo)簽，用于顯示選項卡的按鈕，還有三個
標(biāo)簽，分別對應(yīng)選項卡1、選項卡2、選項卡3，用于顯示不同的內(nèi)容。
在JavaScript中，定義了一個名為openTab的函數(shù)。這個函數(shù)用于切換選項卡和顯示內(nèi)容。在HTML中，按鈕被賦予了相應(yīng)的onclick屬性，以調(diào)用這個函數(shù)。
每個選項卡的內(nèi)容都被定義為一個獨立的
標(biāo)簽，它們的樣式被設(shè)定為display:none，即默認(rèn)隱藏。當(dāng)選項卡被點擊時，對應(yīng)的內(nèi)容被設(shè)置為display:block，即顯示出來。
所以，這就是一個基于HTML5的選項卡代碼，你可以利用它來增強你的網(wǎng)頁功能。