标签页

@TabCard

单击标签，显示对应的内容；类似的应用还有手风琴

可以使用纯 CSS 实现，也可以使用 JavaScript 实现

原理

一个元素的变化，触发目标元素/关联元素的联动变化

如何关联？

:target - 超链接

:hover - 鼠标悬停

:checked - 表单元素选中

:focus - 表单元素聚焦

JavaScript - 无所不能

如果变化？

宽度发生变化 - 如 flex-basis

高度发生变化 - 如 max-height

比例发生变化 - 如 1fr

其它属性变化

:target

配合 <a> 使用

初态，各锚点隐藏

锚点成为目标时，显示

案例实现，请访问标签页1、手风琴

:hover

属性悬停 :hover 时，触发目标元素变化

适合桌面端

案例实现，请访问 accordion flex

:checked

配合表单的单选按钮和 <label> 实现

每个 <input> 和 <label> 关联

初态：各 <input> 隐藏，其中一个默认选中

单击某个单选按钮，使用特定的选择器显示对应的内容

注意结构的设计

需要更多样式加持，可以使用普通选择器、属性选择器或结构伪类选择器

案例实现，请访问标签页2、手风琴1、手风琴2

JavaScript

初态时，各内容隐藏

单击时，为目标叠加激活样式，使其显示

操作 DOM：通过更换元素的 class 或样式 style 实现

因为操作 DOM，所以结构可以任意

每次单击时，需要分别：

. 遍历所有标题，移除 active，然后为当前标题添加活动类 active

. 遍历所有内容，移除 active，然后为当前内容添加活动类 active

案例实现，请访问标签页3、accordion grid、多级菜单、Codepen - TabCard

以上方法通过元素的隐藏和显示实现，频繁更新 DOM 树，适合少量数据的展示，不适合全页使用

JavaScript API

使用 Element - scrollIntoView()

结构可以任意

内容可以任意

单击时，使得当前元素进入视图

要求容器具备滚动条

可以局部导航使用，也可以全页导航使用