当前位置：首页 > Web前端 > HTML

善用CSS伪类制作无JS标签页功能

时间：2023-04-02 21:12:51 HTML

一起来看看Demo:CODEPEN示例页面吧。Bootstrap提供的Tab组件是用jQuery实现的（其实网上有很多用jQuery开发的Tab）；但实际上，高性能和易维护的Tabs组件不需要jQuery或JavaScript技术也可以实现。让我们来看看它是如何完成的：规划HTML结构通常我们使用列表元素来制作选项卡界面，每个

代表一个内容块，包含一组选项卡及其对应的内容。接下来，添加选项卡。Tabs必须使用元素来实现我们想要的功能。后面会解释原因，是本文的核心技巧之一。内容块是

元素。接下来，我们在每个前面添加表单元素单选按钮，结果如下：

页面A内容A

页面B内容B

PageCContentC

为什么要用Label和Radiobutton？本文的主要技巧就是依靠这两个元素的特性，因为我们要“借用”radiobutton的单选特性来判断哪个Tab是Active，同时保证其他Tab没有被选中。Radiobutton默认的样式很丑，我们能改变的样式有限，所以不建议直接设计成Tab，所以我们使用作为触发角色，更容易改变样式。id对应的Radio按钮由Label的For属性触发。所以我们给Radio按钮添加一个id，然后将Label的for属性指向对应的id：

页面A内容A

页面B内容B

页面C内容C

这样就完成了我们的HTML结构，接下来我们需要写一些CSS来让功能发挥作用。写一些CSS。让我们将

并排放置（显示：内联块）。让我们为和内容块设计外观。特别注意内容块的绝对定位，让每次显示的内容都在同一个位置，然后我们控制级联级别（z-index）和透明度（opacity）来实现显示/隐藏。li{显示：内联块；}input[type="radio"]{位置：绝对；大纲：无；...}.tab{...}.section{位置：绝对；顶部：50px；//取决于你的Label高度left:0;...}嗯？还是不能动？因为我们还需要用到CSS的两个重要技术：伪类（Pseudo-class）和通用兄弟元素选择器（SiblingCombinator），以便在标签和内容块之间切换。添加CSS伪类和通用兄弟元素选择器我们给Radio按钮添加伪类：checked，表示当Radio按钮被选中时（等于对应的label被选中）会显示该样式。input[type="radio"]:checked{...}然后标签和内容块要切换。由于它们与单选按钮属于同一个父元素，所以我们这里需要使用通用兄弟元素选择器~为此，通用兄弟选择器有两种：相邻兄弟组合器（AdjacentSiblingCombinator）用于选择相邻的元素是兄弟元素。GeneralSiblingCombinator用于选择作为兄弟元素的所有匹配元素。我们可以使用通用的兄弟选择器：input[type="radio"]:checked~.tab{//你也可以在这里使用相邻的兄弟选择器...}input[type="radio"]:checked~.section{...z-index:2;}注意内容内存块（.section）需要加上z-index属性覆盖其他tab的内容块。最后，我们将Radio按钮设置为透明或者使用定位技术让它在页面上消失。之所以先不提这个，是因为它可以让你在点击tab的时候观察到Radiobutton的选择状态。也方便测试确认tab对应的Radio。必须正确触发按钮。就是这样！梳理一下重点和需要注意的地方：单选按钮的单选特性是基于同名属性的，所以名字必须设置和相同；相反，你可以设置多组名称来实现多组tab组件，各自独立运行，互不影响。Radiobutton的id和Label的for是必须的属性。定位内容块以避免标签重叠。注意HTML结构是否正确，CSS选择器使用是否正确（标签和内容块是否在同一层）。请注意，z-index设置正确。这篇文章的技术给了tabUI另一种开发选择。Radiobutton的特性还有很多应用（比如Switcher）。只要善用HTML表单元素和CSS的一些技巧，同样可以玩出很多有趣的东西。函数，甚至可以代替JavaScript的部分工作。

上一篇：前端日常实战：85#视频演示如何使用纯CSS制作小球弹跳动画

下一篇：自己做一个分页插件

善用CSS伪类制作无JS标签页功能相关文章

最新推荐

猜你喜欢