js选项卡功能怎么实现

要实现一个简单的选项卡功能，你可以使用JavaScript和HTML。下面是一个实现选项卡的示例代码：

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>
<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>

CSS部分：

.tabcontent {
display: none;
}
.tablinks {
background-color: #ccc;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.tablinks:hover {
background-color: #aaa;
}
.tablinks.active {
background-color: #aaa;
}

JavaScript部分：

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";
}

以上代码实现了一个简单的选项卡功能。当点击选项卡按钮时，对应的选项卡内容会显示出来，同时按钮会变为激活状态。你可以根据实际需求修改样式和内容。