HTML 中的选项卡?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 的免费积分!

你知道选项卡是什么,布莱恩。

我的意思是……你每天都在使用它们,在每个操作系统上。每个人都知道它们存在于每个工具箱中。剩下的就是“只要铺好牛路”!但当你真正深入研究时,它比这复杂得多。

布莱恩·卡德尔 分享了一些关于将“选项卡”引入 HTML 的进展。我们有点认为我们知道它们是什么,但你在处理规范并定义它们时必须非常具体。这很棘手。然后,即使你确定了一个可靠的定义,HTML 表达式也不完全清楚。 有很多种选项卡表达式,它们以自己的方式都有意义。想象一下标记选项卡,你将所有选项卡作为一行链接或按钮放在顶部,然后在下方放一些面板。他们称之为“目录”风格的标记,它在某种程度上是合乎逻辑的(“标记看起来像选项卡”)。但它也有一些问题,看起来“有标题的节”更实用(“如果你有标题,你可以构建目录,反之亦然”)。 辛辣部分 是一种完全不同的模式。而这仅仅是他们面临的众多问题之一。

我不羡慕这项工作,但我非常期待这项进展,部分原因是编写选项卡是一件棘手的事情。 并不难,但 做对非常难。我过去谈到过我如何在 jQuery 中多次构建选项卡,其中只是一行链接上的一个点击处理程序隐藏或显示下面的一些匹配 div。如果你完全忽略可访问性(例如,你在选项卡之间导航的方式,焦点管理、ARIA 预期等),这“有效”。

这里有 ShopTalk 讨论,这里有在 我与 Stephen 在 CodePen Radio 上的聊天 中的不同视角,我们讨论了我们关于 CodePen 上的 <Tabs /> React 组件。

直接链接 →