善用CSS伪类，不用JS也能做出选项卡功能

luoyibu 发布于2019-08-02 15:07 / 492人阅读

摘要：取决于你的高度咦还是不能动因为我们还需要运用的两个重要技巧伪类和通用兄弟元素选择器，才能让选项卡与内容块做切换。加入伪类与通用兄弟元素选择器我们为加上伪类，表示当这个被选中时等于对应的标签被选中使才会呈现的样式。

先看看Demo:

CODEPEN 示例页面

讲到选项卡（Tabs）功能时，大多会想到用JavaScript去做，像知名的前端框架：Bootstrap所提供的Tab元件，就是用jQuery实现的（其实网络上有很多用jQuery开发的Tab）；但其实不用jQuery或JavaScript技术，就能实现高效能且易维护的Tabs元件，让我们来看看是怎么办到的：

规划HTML结构

通常我们会用列表元素来制作选项卡的界面，每个

代表用来包含一组选项卡与其对应的内容块。

接下来加入选项卡，选项卡必须使用元素才能实作我们要的功能，原因待会会讲，是这篇文章的核心技巧之一。

内容块则是

元素。

再来我们为每个前面加上表单元素Radio button，结果如下：


  
    
    页面A
    内容A
  
  
    
    页面B
    内容B
  
  
    
    页面C
    内容C

为什么使用Label与Radio button？

这篇文章的主要技巧也就是要靠这两种元素的特性，因为我们要“借用”Radio button的单选特性，决定哪个Tab是Active，同时确保其他Tab是未选中的状态。

Radio button默认的样式是非常丑陋的，而且我们能改动的样式也是有限的，所以不建议直接把它设计成Tab，所以我们使用来担任触发的角色，也比较容易改变样式，再藉由Label的For属性去触发对应id的Radio button。

所以我们为Radio button加上id，然后将Label的for属性指向对应的id：


  
    
    页面A
    内容A
  
  
    
    页面B
    内容B
  
  
    
    页面C
    内容C

这样就完成我们的HTML结构了，再来要写点CSS，让功能得以运作起来。

写点CSS

我们先让

并排（display:inline-block）。

再来为和内容块

设计外观。

特别注意内容块用绝对定位让每次显示的内容都在同样的位置，之后我们再控制层叠等级（z-index）和透明度（opacity）来实现显示/隐藏。

li { display: inline-block; }

input[type="radio"] {
  position: absolute;
  outline: none;
    ...
}

.tab {
    ...
}

.section {
  position: absolute;
  top: 50px; // 取决于你的Label高度
  left: 0;
    ...
}

咦？还是不能动？因为我们还需要运用CSS的两个重要技巧：伪类（Pseudo-class）和通用兄弟元素选择器（Sibling Combinator），才能让选项卡与内容块做切换。

加入CSS伪类与通用兄弟元素选择器

我们为Radio button加上伪类：checked，表示当这个Radio button被选中时（等于对应的标签被选中使）才会呈现的样式。

input[type="radio"]:checked {
    ...
}

然后要做切换动作的是选项卡和内容块，由于它们与Radio button属同一层父元素，所以我们这里要用到通用兄弟元素选择器~来做，通用兄弟元素选择器有两种：

相邻兄弟选择器（Adjacent Sibling Combinator）是用来选择互为兄弟元素的相邻的元素。

通用兄弟元素选择器（General Sibling Combinator）则是用来选择互为兄弟元素的所有匹配的元素。

我们使用通用兄弟元素选择器即可：

input[type="radio"]:checked ~ .tab {        // 这里也可以使用相邻兄弟选择器来做
    ...
}

input[type="radio"]:checked ~ .section {
    ...
  z-index: 2;
}

注意内容内存块（.section）要加上z-index属性才能覆盖其它选项卡的内容块，最后我们再将Radio button设为透明或使用定位的技巧让它消失在页面上，前面没有先提这点的原因，是因为可以让你在点选选项卡时，观察Radio button的选中状态变化，同时也方便测试，确认选项卡对应的Radio button有正确被触发。

这样就大功告成啦！

整理

大略整理一下重点与需要注意的地方：

Radio button的单选特性是基于同样的name属性，所以name一定要设，而且要一样；反之，你可以设置多组name去实现多组的选项卡组件，而且各自是独立运作，不会互相影响。

Radio button的id和Label的for是必要的属性。

内容块的定位要避免覆盖到选项卡。

注意HTML的结构是否正确，CSS选择器的使用是否正确（选项卡和内容块有没有在同一层）。

注意z-index的设置是否正确。

本篇文章的技术给予选项卡UI另一种开发的选择，Radio button的特性还有很多应用可以做（如Switcher），只要善用HTML表单元素与CSS的一些技巧，也能玩出很多有趣的功能，甚至替代JavaScript的部份工作。

云服务器 GPU云服务器 js纵向选项卡 js实现选项卡 js选项卡切换 js删除下拉选项卡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53909.html

善用CSS伪类，不用JS也能做出选项卡功能

摘要：取决于你的高度咦还是不能动因为我们还需要运用的两个重要技巧伪类和通用兄弟元素选择器，才能让选项卡与内容块做切换。加入伪类与通用兄弟元素选择器我们为加上伪类，表示当这个被选中时等于对应的标签被选中使才会呈现的样式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例页面讲到选项卡（...

XUI 2019-08-26 13:49 评论0 收藏0
善用CSS伪类，不用JS也能做出选项卡功能

摘要：取决于你的高度咦还是不能动因为我们还需要运用的两个重要技巧伪类和通用兄弟元素选择器，才能让选项卡与内容块做切换。加入伪类与通用兄弟元素选择器我们为加上伪类，表示当这个被选中时等于对应的标签被选中使才会呈现的样式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例页面讲到选项卡（...

levius 2019-08-30 10:55 评论0 收藏0
《CSS重构：样式表性能调优》读书笔记

摘要：特指度度量的是选择器识别元素的精确性。为中的各个变量赋予相应的数值，就能得到特指度。为类选择器属性选择器和伪类的数量。该文件包含选项卡组的样式。易于混淆的属性，应用注释予以说明。属性按照字母顺序排列。属性值为时，省略单位。 1、什么是优秀的架构（1）优秀的架构是可预测的（2）优秀的架构是可扩展的（3）优秀的架构可提升代码复用性（4）优秀的架构可扩展（5）优秀的架构可维护什么时候可以重...

imingyu 2019-08-29 15:05 评论0 收藏0
webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

摘要：浏览器缓存简单介绍下面来简单介绍一下浏览器缓存，以及为何我要在标题中强调该去则去，该留则留。但后来我还是反转了自己，这种方法虽然能留下浏览器缓存，却做不到该去则去。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：h...

pekonchan 2019-08-06 13:24 评论0 收藏0
webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

摘要：浏览器缓存简单介绍下面来简单介绍一下浏览器缓存，以及为何我要在标题中强调该去则去，该留则留。但后来我还是反转了自己，这种方法虽然能留下浏览器缓存，却做不到该去则去。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：h...

娣辩孩 2019-08-20 18:16 评论0 收藏0