```html
/* 样式 */
.tabcontainer {
width: 100%;
display: flex;
justifycontent: spacearound;
margintop: 20px;
}
.tabbutton {
padding: 10px 20px;
cursor: pointer;
border: 1px solid ccc;
borderbottom: none;
backgroundcolor: f2f2f2;
transition: backgroundcolor 0.3s ease;
}
.tabbutton:hover {
backgroundcolor: ddd;
}
.tabcontent {
display: none;
padding: 20px;
border: 1px solid ccc;
backgroundcolor: fff;
}
选项卡1内容
这是选项卡1的内容。
选项卡2内容
这是选项卡2的内容。
选项卡3内容
这是选项卡3的内容。
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("tabbutton");
for (i = 0; i < tablinks.length; i ) {
tablinks[i].style.backgroundColor = "f2f2f2";
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.style.backgroundColor = "fff";
}