Chris Coyier 刚刚发现这个 - http://css-tricks.com/examples/CSSTabs/
谁能解释一下,当我们单击它时,类 .cur 如何应用于选项卡的标题?里面没有js。
最佳答案
它依赖于 CSS3 选择器 :target。目标是 html 页面中的部分,例如 http://www.example.com/page#section (SO 使用它们跳转到特定答案)。
选择目标后,目标伪类接管。
此处使用 z-index 技巧将各个部分上下叠加。
大体上就是这样,具体的我就不知道了。
编辑--
“cur”类根本没有应用。在右侧,每个“ Pane ”中都定义了所有三个选项卡,但每个 Pane 都有“cur”类“硬编码”。 Z 索引将整个 Pane 及其选项卡带到顶部,从而创建效果。事实上,它只是 HTML 的 3 个 div。
所以这里没有魔法(除了整个 :target 伪类之外)。
关于css - 这个纯 CSS 选项卡是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2397589/