使用details和summary标签可模拟选项卡效果。通过HTML结构搭建多个details区域，用CSS美化样式并隐藏默认箭头，JavaScript控制单次仅一个tab展开，实现简洁的选项卡切换功能，适合轻量级需求。
选项卡切换效果可以通过 HTML 的
使用 details 和 summary 模拟选项卡结构
默认可展开/收起内容，
基本结构如下：
标签一
这里是第一个面板的内容
标签二
这里是第二个面板的内容
标签三
这里是第三个面板的内容
用 CSS 控制外观和排版
默认的 summary 有箭头且样式原始，需用 CSS 美化并模拟选项卡风格。
立即学习“前端免费学习笔记（深入）”；
.tabs {
display: flex;
flex-direction: column;
}
.tab summary {
list-style: none;
padding: 10px;
background: #f0f0f0;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.tab summary::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 10px;
border: 5px solid transparent;
border-top-color: #000;
}
.tab[open] summary::after {
border-bottom-color: #000;
border-top-color: transparent;
}
.tab-content {
padding: 15px;
background: #fff;
border-top: 1px solid #ddd;
}
JavaScript 实现单开选项卡逻辑
默认情况下多个 details 可同时打开，要实现“只显示一个面板”，需添加 JS 控制。
监听每个 summary 的点击事件，手动关闭其他已打开的 tab。
document.querySelectorAll('.tab summary').forEach(summary => {summary.onclick = function(e) {
const tabItem = this.parentElement;
if (tabItem.hasAttribute('open')) {
return;
}
document.querySelectorAll('.tab').forEach(el => {
el.removeAttribute('open');
});
tabItem.setAttribute('open', '');
e.preventDefault();
};
});
注意：summary 点击会自动触发 toggle，因此要在已打开时阻止默认行为，避免闪烁或反复开关。
基本上就这些。利用 details/summary 能快速搭建语义化良好的可折叠结构，再通过样式和脚本模拟出选项卡效果，适合轻量级需求，无需复杂框架。
