更新： 我们正在撤回这篇文章。其中大部分工作最初由 Art Lawry 完成，并在 A List Apart 上的文章 Radio-Controlled Web Design 中发表。我们没有适当地对这项工作进行认可。向 Art 和 A List Apart 道歉。
进一步解释和更多关于 CSS 选项卡的信息
在 CSS-Tricks，我们多年来一直在玩弄 CSS 选项卡的想法。在五年前，我们探索了 七种不同的技术（它们都很糟糕，不要使用它们）。四年前，我们 重新审视了它，解决了一些缺点，但也引入了一些新问题。
如今，通过像 复选框技巧 这样的技术，您可以使用 HTML 和 CSS 更接近良好的选项卡 UI 体验。看看 Art 的 关于如何做到的帖子。以及他的最终演示
查看 Pen Radio-Controlled Tabs (ARIA) by Art Lawry (@artlawry) on CodePen.
与往常一样，在网络上，总有新的可能性可以探索。我相信对于使用 `display: none` 隐藏内容时，表单控件是否可以接受辅助功能来切换内容的可见性，这个问题还没有定论。也许可以探索 其他隐藏方法。
Stephan Barthel 已经 探索了使用 flexbox 的概念，这本身就很有趣。
有传言说 CSS 将有助于任意状态驱动的设计，因此对于这类事情，未来一定很有趣。
第一个！
为什么不使用 css :target？难道这比使用复选框更好吗？=\
当然可以！同时，它可能会导致一些奇怪的、不必要的页面跳转垃圾在点击时出现：https://css-tricks.org.cn/functional-css-tabs-revisited/
@Geoff Graham
“不必要的页面跳转垃圾在点击时出现”
可以避免
http://codepen.io/Kseso/pen/FlInH
更多信息 [es-es 博客]
http://ksesocss.blogspot.com/2012/10/tabs-rwd-target-sin-salto.html
是的，当然不是说它不起作用——只是很高兴不用考虑这种副作用。:)
我一直对 CSS 能做的事情感到兴奋，但我对这一点有点担心（或多或少）。
JavaScript 并不邪恶，我认为这种事情与我们应用程序中的状态有关，应该保留在 JavaScript 中，以便更好地理解和维护。
但是是的，对于一个非常简单的页面，或者我们 Web 应用程序中很小且不重要的部分，我认为这确实很强大、易于操作且非常干净。
但再次强调，这仅仅是我的意见。
使用单选按钮和复选框作为链接进行样式设置时，键盘用户期望在这些链接上按 Enter 键会产生预期的结果；但是，如果我没记错的话，复选框和单选按钮只能使用空格键进行选择：这是关于这种方法的另一个不太酷的事实。
评论可能略有偏差，因为我最近没有测试基于输入的元素和锚元素的行为之间的差异。
@Irfan 在单选按钮容器上添加一个事件监听器，您就可以使用 Enter 键选择获得焦点的单选按钮（事件冒泡真是太美妙了）。
最后一个选项卡（甜点）的活动状态已损坏。
可恶的那些丢失的点……谢谢，已修复。
你能解释一下为什么你需要使用
而不是仅仅
我看不出这会导致任何区别？
这就是 通用兄弟选择器，它使这种神奇的事情发生。
您的版本表示我们想要位于 .tabs 内部的 #breakfast-tab 元素，而 .tabs 又位于 #breakfast 内部（并且 #breakfast 具有焦点）。但由于 #breakfast 是一个单选输入，我们不能在它里面放置其他元素。
相反，我们说我们想要位于 .tabs 内部的 #breakfast-tab，它与 #breakfast 是兄弟关系（并且 #breakfast 具有焦点）。我们不能将选项卡放在单选输入内部，但我们可以放在它之后。因此，这使我们能够根据其状态来设置位于单选按钮（或复选框）输入之后的元素的样式。
嘿，不错！感谢您记得我！
现在我的评论没有意义了，但我是在这篇文章的早期版本中被提及的。:-/
这很酷！感谢分享。
使用基于 JavaScript 的选项卡系统的一些优势是，如果使用正确的脚本，它会使每个选项卡都有自己的 URL，这反过来有利于 SEO 和内容共享。
FWIW，jQuery UI Tabs 有这个：https://jqueryui.jqueryjs.cn/tabs/
独立演示：https://jqueryui.jqueryjs.cn/resources/demos/tabs/default.html#tabs-2
我也觉得像这样的解决方案，虽然非常巧妙，但有点“hacky”。使用 `input` 和 `label` 作为选项卡在我看来感觉不符合语义 :/
现在，这里有一些问题要问大家
1- 为什么我们总是试图避免使用 JavaScript？
2- JavaScript 真的那么糟糕吗？即使是像这样的解决方案？
3- JavaScript 是否会像 CSS 一样普遍，甚至像 HTML 本身一样普遍？
—
另外，本着正确命名事物的精神，这里有一个建议
空白本身并不一定是坏事，实际上恰恰相反
1- 它为布局中的元素提供了“呼吸”的空间，避免感觉拥挤。
2- 它增强了内容层次结构。
3- 它提高了可读性。
更多信息：https://boagworld.com/design/why-whitespace-matters/
照此看来，这个短语具有误导性，因为它将空白标记为坏事。我建议将空白一词更改为以下之一：底部间隙；未使用空间；空白；
再次感谢！
我把它也放在这里
http://codepen.io/Merri/pen/bytea/
应该解决了辅助功能问题 + 具有友好的语法，每个选项卡都被定义为一个独立的块，而不是将其分成三个部分（传统的单选按钮首先，标签其次，然后是面板）。
链接中的示例包含额外的 CSS 和 JS 以使其在 IE8、IE7 和 IE6 中工作，以易于删除的格式。没有 JS 的支持从大约 IE9、Opera Presto 和 Safari 5 时代的浏览器开始。
它在移动设备上会转换为手风琴模式。
非常感谢您撰写了这篇文章！
真的很喜欢这个——很棒的东西——但在我发现主文本 CSS 中的错误之前，它第一次对我不起作用
目前……
#breakfast:checked ~ tab-links #breakfast-tab,
#dinner:checked ~ tab-links #dinner-tab,
#dessert:checked ~ tab-links #dessert-tab
应该是……
#breakfast:checked ~ .tab-links #breakfast-tab,
#dinner:checked ~ .tab-links #dinner-tab,
#dessert:checked ~ .tab-links #dessert-tab
一个没有 JS 的选项卡界面作为一个概念很好，但为什么辅助功能总是事后才考虑？
它应该成为我们开发流程的一部分。
基本的键盘支持在哪里？
而且一旦修复了，屏幕阅读器用户仍然没有机会，因为内容被 “display:none;” 隐藏。
#JustSaying
:)
感谢 Geoff 改进了旧文章和方法，但我同意 @basher 的观点——这永远不应该被视为最佳实践。它确实是一个“CSS 技巧”——但它却对视力障碍人士关上了大门。
这篇文章在 CSS Tricks 上显得格格不入。我非常尊重这篇文章的工作，以及这个网站——并将继续尊重——但我发现这篇文章令人失望。我想学习如何以最好的方式构建网络——为所有人！
是的，我的想法完全一样。这只是一个玩具，也许适合快速演示，但不应该在严肃的项目中使用。即使它不是不可访问的，仅仅为了它们的交互属性而使用表单元素也感觉不对。太可惜了
<dl>在所有浏览器上的工作方式不同；我主要将它们用于问答类型的切换器。使用:targeted方法对选项卡更有意义，我可能会尝试@Kseso的想法来防止跳跃。这样做的一个缺点是，在一个选项卡页面上，通过多个锚点来回导航是不可预料的……如果有一种好的无 JS 方式可以离开页面，然后只回到最后一个打开的选项卡，而不是遍历所有点击历史记录就好了。感谢您重新审视，真是救命恩人。
您可以使用 `max-height: 0`（以及 `overflow: hidden`）代替 `display: none`。
http://codepen.io/anon/pen/JdXgEN
优点
* 可以与过渡结合起来，在选项卡之间进行动画
缺点
* 打开状态需要显式指定最大高度
* 感觉有点别扭
实际上，仔细想想，也许不要这样做……
另外两个缺点
像这样仅视觉上隐藏元素仍然允许屏幕阅读器用户找到并与它们进行交互。
在屏幕上放置一堆用户看不到的文本是一种黑帽策略，会损害 SEO。
display: none;非常重要。:)@James C：允许屏幕阅读器用户与内容进行交互怎么会是缺点呢？许多人根本无法用眼睛阅读文本，因此我不明白在任何情况下强制隐藏内容有什么用。此外，如果您需要，可以使用 JavaScript 更新 ARIA 属性，让屏幕阅读器知道内容在视觉上不可见，我认为这是更好的做法。
SEO 的担忧也不存在。谷歌一直没有问题对我们网站上的非 `display: none;` 基于 CSS 的选项卡解决方案进行索引，也没有给出任何惩罚。自使用无 JavaScript 选项卡以来，我们的排名实际上有所提高（当然也做了其他改进）。
最后，我发现这是一个很好的功能，即使人们禁用了 JavaScript，他们也能够导航、访问网站上的所有内容并购买东西。
我还有一种（第 8 种？）创建纯 CSS 选项卡的方法，无需使用单选按钮、目标或焦点选择器，它仍然不如已选中单选按钮那么完美，但可以使用无限的过渡延迟来实现，感兴趣吗？:>>
@basher、@kyle 和 @philtune：我在顶部提到的链接中更深入地探讨了此技术的可访问性现状。它可能仍然无法让您将此技术作为“最佳实践”而感到满意，但它肯定超越了最初发表在本文中的内容。
我还谈到了使用复选框/单选按钮存储页面状态，这可能会解决 @philtune 的问题（再说一次，我发现人们会对这条线的一方或另一方大肆鼓吹）。
总的来说，我真的很高兴人们正在探索这项技术的优缺点。希望其他人能够继续改进它并挑战它，以便出现更强大的解决方案。