要实现简单的选项卡功能，你可以使用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 函数会在点击选项卡按钮时被触发，它会根据点击的选项卡按钮显示相应的选项卡内容，并将点击的选项卡按钮设置为活动状态。最后，我们通过设置第一个选项卡为默认打开来初始化选项卡功能。
你可以根据需要修改选项卡的样式和内容。
