# 标签页

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

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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>
```

## 样式类

`zh-tabs`

## 属性

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

## 事件

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

## 无障碍

- 只有当前标签在 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。