css - 这个纯 CSS 选项卡是如何工作的?

标签 css

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/

相关文章:

css - 字体双px值代表什么?

html - 需要显示带有等长下划线的多行文本

css - 突然错位的导航栏

jquery - 如何在 html 站点中发生鼠标悬停事件时应用展开谷歌地图

html - 自定义 CSS 未显示在 Google Chrome v34.0.1847.131 或 IE 9 中

html - 如何将一个 div 放在另一个 div 的底部。这样当父 div 滚动时子 div 不会移动

html - 使用 CSS 隐藏 1 行文本

jquery - prettyPhoto 没有显示所有图片

javascript - 如何在没有新图像移动对象的情况下包含鼠标悬停图像链接?

html - 使用日期输入删除 vuetify v-text 字段上的向下箭头