gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 12:29:40 25 4
gpt4 key购买 nike

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com