HTML選項卡是Web開發中非常常見的一個功能。選項卡可以讓頁面顯示多個內容，但是只顯示一個內容。在這篇文章中，我們將介紹如何使用HTML和CSS制作一個簡單的選項卡。

下面是HTML代碼：

<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 id="tab1" class="tabcontent">
<h3>選項卡1</h3>
<p>這是選項卡1的內容。</p>
</div>
<div id="tab2" class="tabcontent">
<h3>選項卡2</h3>
<p>這是選項卡2的內容。</p>
</div>
<div id="tab3" class="tabcontent">
<h3>選項卡3</h3>
<p>這是選項卡3的內容。</p>
</div>
</div>

上面的代碼包括一個包含3個按鈕和3個選項卡內容的總容器。每個按鈕都有一個onclick事件，而每個選項卡都有一個唯一的ID。tabcontent類用于隱藏除當前選項卡外的所有選項卡的內容。

現在，我們需要一些CSS樣式來使HTML代碼工作：

/* 隱藏所有選項卡內容除了第一個 */
.tabcontent {
display: none;
}
/* 激活(顯示)當前選項卡內容 */
.active {
display: block;
}
/* 按鈕樣式 */
.tablinks {
background-color: #ccc;
color: black;
display: inline-block;
padding: 10px;
margin-right: 15px;
border-radius: 5px 5px 0 0;
cursor: pointer;
}
/* 激活狀態的按鈕樣式 */
.active {
background-color: #f4f4f4;
}

以上是實現選項卡的核心代碼，感謝閱讀。