跳到正文

标签页

横向或纵向标签页。标签用 aria-controls 关联面板，面板的显示隐藏由库处理。也可以当「分段开关」用：几个标签指向同一个面板，在 zh:tab-change 里换内容。

带行为 核心包 1 个事件

示例

概览内容
正文内容
…

在线试用 Markdown 版

代码

<div class="zh-tabs" role="tablist" aria-label="分区">
  <button role="tab" aria-selected="true" aria-controls="p1">概览</button>
  <button role="tab" aria-selected="false" aria-controls="p2">正文</button>
</div>
<div id="p1">概览内容</div>
<div id="p2">正文内容</div>

<!-- 分段开关：三个标签共用一个面板，由事件换内容 -->
<div class="zh-tabs" role="tablist" id="range" aria-label="统计周期">
  <button role="tab" aria-selected="true" aria-controls="kpi">今日</button>
  <button role="tab" aria-selected="false" aria-controls="kpi">近 7 天</button>
  <button role="tab" aria-selected="false" aria-controls="kpi">近 30 天</button>
</div>
<section id="kpi" aria-live="polite">…</section>
<script>
function render(i) { document.getElementById('kpi').textContent = ['今日数据', '近 7 天数据', '近 30 天数据'][i]; }
// 初始化时也会触发一次 zh:tab-change，所以第一次进来就会按当前选中的标签渲染
document.getElementById('range').addEventListener('zh:tab-change', function (e) { render(e.detail.index); });
</script>

属性

属性用在取值说明
role="tablist".zh-tabs必填标识这是标签列表，库据此初始化
aria-orientation.zh-tabsvertical纵向标签页：方向键改为上下
aria-controls每个 [role=tab]对应面板的 id对应面板的 id。多个标签可以指向同一个面板：只要当前选中的标签指向它，它就是显示的；不写则只切换选中状态，不管理面板
aria-selected每个 [role=tab]true | false初始选中项；都没写则选中第一个

事件

事件触发于detail说明
zh:tab-change.zh-tabs{ index, tab }选中项变化时触发（冒泡），初始化时也会触发一次

样式类

zh-tabs

无障碍

  • 只有当前标签在 Tab 顺序里（roving tabindex），方向键在标签间移动并同时激活，Home / End 跳到首尾，到边界会循环
  • 面板自动加上 role="tabpanel"，隐藏的面板用 hidden

常见问题

标签页是什么？

横向或纵向标签页。标签用 aria-controls 关联面板，面板的显示隐藏由库处理。也可以当「分段开关」用：几个标签指向同一个面板，在 zh:tab-change 里换内容。

怎么使用标签页？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

标签页有哪些事件？

zh:tab-change（选中项变化时触发（冒泡），初始化时也会触发一次）。

标签页支持键盘和读屏吗？

只有当前标签在 Tab 顺序里（roving tabindex），方向键在标签间移动并同时激活，Home / End 跳到首尾，到边界会循环；面板自动加上 role="tabpanel"，隐藏的面板用 hidden。

标签页需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。