HTML怎么创建响应示例切换标签_HTML JSON/XML/YAML选项卡【技巧】-html教程-PHP中文网

用原生html+css+5行js可实现json/xml/yaml标签切换：通过data-tab与data-tab-pane属性绑定，js控制.active类显隐；禁用因不支持互斥切换；需配合white-space: pre-wrap及字符转义确保格式正确。

html怎么创建响应示例切换标签_html json/xml/yaml选项卡【技巧】

怎么用原生 HTML + CSS 实现 JSON/XML/YAML 切换标签

纯 HTML 无法动态切换内容，必须配合少量 JavaScript；但可以不用框架、不引入外部库，5 行 JS 就够用。核心是靠 data-tab 属性标记面板，用 click 事件控制 class 显隐。

常见错误：直接写多个 <pre class="brush:php;toolbar:false;"></pre> 并列，没加 display: none 默认隐藏，结果所有格式同时显示；或者用 id 写死 JS，一复制到新页面就失效。

每个选项卡按钮加 data-tab="json"，对应面板加 data-tab-pane="json"
默认只给第一个面板加 active class，CSS 里写 [data-tab-pane].active { display: block; }
JS 只需监听按钮点击 → 移除所有 .active → 给目标面板加 .active

document.querySelectorAll('[data-tab]').forEach(btn =>
  btn.addEventListener('click', () => {
    document.querySelectorAll('[data-tab-pane]').forEach(p => p.classList.remove('active'));
    const target = btn.dataset.tab;
    document.querySelector(`[data-tab-pane="${target}"]`).classList.add('active');
  })
);

为什么别用
+
模拟选项卡

看起来语义清晰、零 JS，但实际体验差：它只能展开/收起，不能“互斥切换”，用户点 JSON 后再点 XML，两个都开着；而且无法用 CSS 精确控制激活态样式（比如高亮当前按钮）。

更麻烦的是，<details></details> 在 Safari 旧版和部分屏幕阅读器中行为不一致，open 属性不支持动画，也没法用 JS 批量控制状态。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

适合单个可折叠说明块，不适合多选一的格式切换
如果硬要用，得额外加 JS 监听 toggle 事件并手动关闭其他 <details></details>，反而更重
移动端点透、焦点管理混乱的问题比普通 div + click 更难调

JSON/XML/YAML 示例内容怎么保持缩进和换行

<pre class="brush:php;toolbar:false;"></pre> 是必须的，但光有它不够：默认会把连续空格合并，YAML 的缩进会塌掉；XML 的换行也可能被忽略。得配 white-space: pre 或 pre-wrap，且内容必须用或真实空格（不能靠 HTML 缩进）。

不要在 HTML 源码里靠缩进写 YAML，要写成一行再用 \n 换行（或服务端渲染时保留）
JSON 示例建议用 JSON.stringify(obj, null, 2) 生成，避免手写引号、逗号错误
XML 中 <code>> 必须转义为 < >，否则被浏览器解析成标签

<pre class="brush:php;toolbar:false;" data-tab-pane="yaml">service:   name: api  port: 8080

兼容性与性能要注意什么

这套写法在 IE11+ 和所有现代浏览器都稳，但有两个隐形坑：一是 dataset 在 IE11 中对连字符属性名（如 data-tab-name）会转成驼峰（tabName），所以统一用单单词；二是大量 querySelectorAll 在含几十个 tab 的文档里会有微卡顿，但示例页完全无感。