要實現簡單的選項卡功能，你可以使用JavaScript和HTML的結合。以下是一個簡單的選項卡實現示例：
<!DOCTYPE html>
<html>
<head>
<style>
.tabcontent {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
<button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
<button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>
<div id="tab1" class="tabcontent">
<h3>Content for Tab 1</h3>
<p>This is the content for Tab 1.</p>
</div>
<div id="tab2" class="tabcontent">
<h3>Content for Tab 2</h3>
<p>This is the content for Tab 2.</p>
</div>
<div id="tab3" class="tabcontent">
<h3>Content for Tab 3</h3>
<p>This is the content for Tab 3.</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";
}
// 默認顯示第一個選項卡
document.getElementById("tab1").style.display = "block";
document.getElementsByClassName("tablinks")[0].className += " active";
</script>
</body>
</html>
在上面的示例中，我們使用 tabcontent 類來隱藏所有的選項卡內容，然后使用 tablinks 類來處理點擊事件。 openTab 函數會在點擊選項卡按鈕時被觸發，它會根據點擊的選項卡按鈕顯示相應的選項卡內容，并將點擊的選項卡按鈕設置為活動狀態。最后，我們通過設置第一個選項卡為默認打開來初始化選項卡功能。
你可以根據需要修改選項卡的樣式和內容。
