html制作多个tab页面,纯CSS打造双层Tab

写代码前的准备

一般来说，使用纯CSS实现Tab页面效果的常用方式是a标签和:target结合，但是这样实现有一个强迫症的地方：由于是使用a标签把页面“链接”到某个指定ID的元素上，因此浏览器的URL里会出现[#ID]的情况。而且，使用a标签也不好控制Tab导航按钮选中后的样式。

一组Tab标签页面可以看做是一组互斥的按钮：反正我每次都只能有一个按钮处于选中的状态。是不是觉得这个性质就像某个熟悉的html元素？对，就是单选按钮啊！单选按钮有一个伪类是:checked，更方便调整按钮选中后的样式啊！

所以这篇博客采用的方式是：

HTML:

CSS: xxx:checked{}

单层Tab实现

实现思路

有了开头部分的提示，思路应该就比较清晰了：使用一组radio button，选中某个选项的时候就展示这个选项对应的页面。

那么问题来了，咱们都知道，radio button自带的样式(小灰圈中间一个点)简直丑哭，不同的浏览器还有不同的渲染效果，而且很明显，想要拿CSS把这个丑哭的小灰圈感动成大方框中间还带字儿的那种效果显然不容易啊。不怕，网上那么多的美好的单选按钮样式也不是只能出现在设计师们的PSD中的啊，是时候拿出lable标签这个大法宝了。

: 定义和用法

标签为 input 元素定义标注(标记)。

元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在< label> 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

也就是说，我们可以通过标签的for属性，把和对应的单选按钮绑定起来，通过点击标签来改变单选按钮的选中和取消状态，通过给添加样式来实现美化按钮的效果。

那么问题又来了，单选按钮的样式问题解决了，那该怎么把每个Tab下要显示的内容和单选按钮联系起来？很简单，有一个神奇的选择器：

相邻元素选择器 +

效果图

代码

代码全放上来啦，偷懒的小伙伴们直接复制粘贴就可以用啦。

纯CSS实现双层tab

tab1

我是第一个tab

tab2

我是第二个tab

tab3

我是第三个tab

双层Tab实现

实现思路

实现了单层的Tab之后再去实现双层的似乎很容易：给第一层的Tab内容页里嵌套上第二层的就好了嘛。

事实也很容易，确实是这样，不过有个小小的坑：第一层的tab内容页我是先使用的visibility：visible把内容页隐藏了起来，当对应的radio button 选中时再把它的visibility设置为显示。也就是说，正常情况下，一个tab页面的子tab页面应该是随着这个tab页面一起出现或者隐藏，但是如果子tab页面组用的也是visibility，就会出现这种情况：

子Tab的内容页在应该消失的地方并没有消失，原因是切换到tab2后，子Tab2仍然处于选中状态，虽然它的父容器的visibility是hidden，可是它的visibility被重新设置为visible。

解决方法就是把原本使用visibility隐藏和显示元素的地方换做display，visibility: hidden的时候虽然元素看不到了，但是它依然在占据着位置，display: none的时候，元素相当于从当前位置被移除，带着它的子元素一起被移除。

效果图

代码

纯CSS实现双层tab

tab1

子Tab1

子Tab1内容

子Tab2

子Tab2内容

子Tab3

子Tab3内容

tab2

我是第二个tab

tab3

我是第三个tab

提供一个更懒的方式，直接去github下代码：PM’s github

html制作多个tab页面,纯CSS打造双层Tab相关推荐

html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
html图片倒角,CSS实例：纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
纯CSS打造的Family tree（族谱）
Family tree(族谱),也称家谱,用来记录家族世系繁衍辈份关系.本文结合实例,不借助任何js脚本,使用纯CSS打造一个漂亮的Family tree(族谱),也可以应用的企业组织架构图中. 查看 ...
html银白色,纯CSS打造银色MacBookAir（二）_html/css_WEB-ITnose
上一篇:<纯CSS打造银色MacBook Air(一)> 写在前面上一篇我们谈了<纯CSS打造银色MacBook Air(一)>,今天我们接着谈. First注:如果图片过大 ...
精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
纯css打造超能陆战队--大白
纯css打造超能陆战队–大白要点思路要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
html中怎么制作太阳月亮交替,使用纯CSS实现太阳和地球和月亮运转模型动画的方法...
使用纯CSS实现太阳和地球和月亮运转模型动画的方法发布时间:2020-09-22 10:42:05 来源:亿速云阅读:140 作者:小新使用纯CSS实现太阳和地球和月亮运转模型动画的方法?这个问 ...

html制作多个tab页面,纯CSS打造双层Tab

html制作多个tab页面,纯CSS打造双层Tab相关推荐

最新文章

热门文章