教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。
而今天所要分享的,是使用 0 行JS代码来实现Tab切换!
具体效果如下:

方法一:模拟单选框原理
关于模拟单选框,在我之前文章中有讲到,详情请戳→纯CSS模拟单选框和复选框
该方法大致原理如下:
当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。
具体如何实现呢?请耐心往下看...
1. HTML结构
<!--HTML-->
<ul>
<li>
<input id="tab1" type="radio" name="tab" checked>
<label for="tab1">选项一</label>
<div class="content">选项一内容</div>
</li>
<li>
<input id="tab2" type="radio" name="tab">
<label for="tab2">选项二</label>
<div class="content">选项二内容</div>
</li>
<li>
<input id="tab3" type="radio" name="tab">
<label for="tab3">选项三</label>
<div class="content">选项三内容</div>
</li>
</ul>
单选框想必大家都会用吧,type为radio,name属性值相同即可。
另外需要注意以下两点:
① label需要绑定input,方法就是label的for属性值与input的id一致,这样当点击label元素时input单选框就会被选中
② input、label和div三者是有顺序的,不能随意调换顺序(原因后面你就知道了)
2. CSS样式
没有JS,那么CSS自然就得扮演举足轻重的角色。
/*CSS*/
*{ margin: 0; padding: 0;}
ul{ position: relative; width: 300px; margin: 100px auto;}
ul li{ list-style: none;}
ul li input{ display: none;}
ul li label{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;}
ul li input:checked+label{ color: #fff; background-color: #000;}
ul li:last-child label{ border-right: 1px solid #000;}
ul li .content{ opacity: 0; visibility:hidden; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;}
ul li:nth-child(1) .content{ background-color: #0f0;}
ul li:nth-child(2) .content{ background-color: #00f;}
ul li:nth-child(3) .content{ background-color: #f0f;}
ul li input:checked~.content{ opacity: 1; visibility:visible;}
这里同样有几个重点需要注意:
① input需要隐藏,因为我们并不需要显示它,但它却是实现Tab切换的核心力量
② “input:checked+label” 表示被选中的单选框后的 label 元素需要做标记
③ .content 元素需要先全部隐藏
③ “input:checked~.content” 表示被选中的单选框后的 .content 元素需要显示
注: + 表示相邻兄弟选择器,也就是选择紧邻其后的元素; ~ 表示兄弟选择器,也就是选择该元素之后的所有同级元素
方法二::target伪类
关于:target伪类,在我之前文章中有讲到,详情请戳→纯CSS制作单页Web应用
该方法大致原理如下:
当用户点击a元素时,页面URL后会相应添加当前所点击的锚链接,这时对应此锚连接id的.content元素就会应用:target伪类的样式,而同时也给已应用上:target伪类的.content元素之后的a元素自身应用样式。
1. HTML结构
<!--HTML-->
<ul>
<li>
<div class="content" id="content1">选项一内容</div>
<a href="#content1">选项一</a>
</li>
<li>
<div class="content" id="content2">选项二内容</div>
<a href="#content2">选项二</a>
</li>
<li>
<div class="content" id="content3">选项三内容</div>
<a href="#content3">选项三</a>
</li>
</ul>
这种方式的HTML结构相对比较简单,不需要使用隐藏的单选框作为媒介,而是使用锚链接和:target作为连接“选项”与“选项内容”之间的桥梁。
另外需要注意以下两点:
① 每个a标签的href属性须与其兄弟节点.content元素的id值一致
② .content元素与a标签的顺序不能更改
2. CSS样式
/*CSS*/
*{ margin: 0; padding: 0;}
a{ text-decoration: none; color: #000;}
ul{ position: relative; width: 300px; margin: 100px auto;}
ul li{ list-style: none;}
ul li a{ float: left; width: 100px; text-align: center; line-height: 30px; border: 1px solid #000; border-right: 0; box-sizing: border-box; cursor: pointer; transition: all .3s;}
ul li:last-child a{ border-right: 1px solid #000;}
ul li .content{ opacity: 0; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; border: 1px solid #000; box-sizing: border-box; font-size: 24px; text-align: center; line-height: 300px; color: #fff; transition: all .3s;}
ul li:nth-child(1) .content{ background-color: #0f0;}
ul li:nth-child(2) .content{ background-color: #00f;}
ul li:nth-child(3) .content{ background-color: #f0f;}
ul li .content:target{ opacity: 1;}
ul li .content:target+a{ color: #fff; background-color: #000;}
这里同样有几个重点需要注意:
① “.content:target” 将锚链接指向的当前.content元素应用样式
② “.content:target+a” 将锚链接指向的当前.content元素后紧邻的a元素应用样式
本文重点总结
无需JS,利用单选框或锚链接,再配合一些CSS样式即可制作简单的Tab切换
教你两招用纯CSS写Tab切换的更多相关文章
- CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)
是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...
- 拓展-教你手把手用纯CSS写轮播图
先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...
- 利用target的特性,可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 手把手教你打造一个纯CSS图标库
来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...
- 纯css实现tab导航
仿照这个 实现了一个纯css的导航功能 html <div class="main"> <div id="contain1">列表一内容 ...
随机推荐
- Python活力练习Day1
Day1:输入年月日,判断这一天是这一年的第几天 eg: input : 2019-02-01 output : 32 data = list(input('please input ...
- Java读取本地json文件
背景 之前一直在弄一个Java爬虫,将爬取的信息保存到了数据库中.但这毕竟是一个课程设计,在设计前端GUI,展示数据的时候最开始是直接通过select语句从数据库中查找的,但我担心交给老师后,老师还要 ...
- (转)LSTM神经网络介绍
原文链接:http://www.atyun.com/16821.html 扩展阅读: https://machinelearningmastery.com/time-series-prediction ...
- Linux逻辑卷的创建
什么是LVM? LVM(逻辑卷管理器):是Linux环境下对磁盘分区进行管理的一种机制.主要作用是动态分配磁盘分区及调整磁盘分区大小,并且可以让多个分区或者物理硬盘作为一个逻辑卷(相当于一个逻辑硬盘) ...
- ARTS改版啦,在改变中前行
这次打卡,稍微进行了一次改版,在算法和英文文档上进行了拆分,具体的内容在前两天的文章里已经输出,所以在这篇上针对这两块做了一个汇总. 当然,技巧方面的还是在这里先输出,后续再考虑整改吧.循序渐进地上升 ...
- vue如何循环渲染element-ui中table内容
对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...
- Android五大布局详解——RelativeLayout(相对布局)
RelativeLayout 接着上一篇,本篇我将介绍RelativeLayout(相对布局)的一些知识点. RelativeLayout 这是一个非常常用的布局,相比于上节所学到的LinearLay ...
- windows和linux下查看java安装路径
windows下查看版本:(默认安装路径安装就不需要去配环境变量了) java -version windows下查看安装路径: java -verbose Linux下安装版本查看方式和window ...
- Windows10安装ubuntu18.04双系统教程
写在前面:本教程为windows10安装ubuntu18.04(64位)双系统教程,是我多次安装双系统的经验总结,安装方法同样适用于ubuntu16.04(64位).为了直观和易于理解,我会尽量图文并 ...
- 批量群发,营销必备!Python代码实现自动发送邮件!
在运维开发中,使用 Python 发送邮件是一个非常常见的应用场景.今天一起来探讨一下,GitHub 的大牛门是如何使用 Python 封装发送邮件代码的. 一般发邮件方法 SMTP是发送邮件的协议, ...