Tab 页由 tab 标签和对应的面板组成，要实现的效果就是点击不同的 tab 标签，展示对应的 panel。不展示的 panel 直接使用display: none;隐藏即可。由于在 html 绑定的onclick函数没法传event参数，因此使用addEventListener函数进行 tab 标签的click事件绑定。
在 tab 标签中还加了index属性，用来获取对应的 panel。在处理 tab 点击时，先将所有的 tab 和 panel 都去除active类别，然后给目标 tab 和 panel 添加active类别。
<div>
<div id="tabs" class="tabs">
<div index="0" class="tab tab_active">Tab 1</div>
<div index="1" class="tab">Tab 2</div>
</div>
<div id="panels" class="panels">
<div class="panel panel_active">Panel 1</div>
<div class="panel">Panel 2</div>
</div>
</div>
<script>
document
.getElementById("tabs")
.addEventListener("click", (e) => tabClick(e));
function tabClick(e) {
const target = e.target;
// 所有的tab页
const tabs = document.getElementById("tabs").children;
// 所有的panel页
const panels = document.getElementById("panels").children;
// 将所有的tab页和panel页都去掉active
Array.from(tabs).forEach((tab, index) => {
tab.classList.remove("tab_active");
panels[index].classList.remove("panel_active");
});
// 给点击的tab页加上active
target.classList.add("tab_active");
const index = target.getAttribute("index");
panels[index].classList.add("panel_active");
}
</script>
