# 文章目录 TableOfContents

分类：内容 · React：TableOfContents

长文的目录：滚动到哪一节，哪一项高亮（data-spy）。

## 示例
```html
<nav aria-label="本文目录"><p class="xxd-toc__title">本文</p>
<ul class="xxd-toc" data-spy>
  <li><a href="#demo" aria-current="true">演示</a></li>
  <li data-depth="3"><a href="#props">属性与类名</a></li>
  <li><a href="#rules">规则</a></li>
</ul></nav>
```

## 属性与类名
- `data-spy`：跟着滚动高亮当前节
- `data-depth="3"（li）`：二级缩进
- 类名：`xxd-toc` `xxd-toc__title`

## 键盘与读屏
- 外层 <nav aria-label="本文目录">；当前节 aria-current="true"
- 链接指向标题的 id；标题本身用真正的 h2 / h3