说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。

而今天所要分享的,是使用 0 行JS代码来实现Tab切换!

具体效果如下:

 
Tab切换

方法一:模拟单选框原理

关于模拟单选框,在我之前文章中有讲到,详情请戳→纯CSS模拟单选框和复选框

该方法大致原理如下:

当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。

具体如何实现呢?请耐心往下看...

1. HTML结构

  1. <!--HTML-->
  2. <ul>
  3. <li>
  4. <input id="tab1" type="radio" name="tab" checked>
  5. <label for="tab1">选项一</label>
  6. <div class="content">选项一内容</div>
  7. </li>
  8. <li>
  9. <input id="tab2" type="radio" name="tab">
  10. <label for="tab2">选项二</label>
  11. <div class="content">选项二内容</div>
  12. </li>
  13. <li>
  14. <input id="tab3" type="radio" name="tab">
  15. <label for="tab3">选项三</label>
  16. <div class="content">选项三内容</div>
  17. </li>
  18. </ul>

单选框想必大家都会用吧,type为radio,name属性值相同即可。

另外需要注意以下两点:

① label需要绑定input,方法就是label的for属性值与input的id一致,这样当点击label元素时input单选框就会被选中
input、label和div三者是有顺序的,不能随意调换顺序(原因后面你就知道了)

2. CSS样式

没有JS,那么CSS自然就得扮演举足轻重的角色。

  1. /*CSS*/
  2. *{ margin: 0; padding: 0;}
  3. ul{ position: relative; width: 300px; margin: 100px auto;}
  4. ul li{ list-style: none;}
  5. ul li input{ display: none;}
  6. 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;}
  7. ul li input:checked+label{ color: #fff; background-color: #000;}
  8. ul li:last-child label{ border-right: 1px solid #000;}
  9. 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;}
  10. ul li:nth-child(1) .content{ background-color: #0f0;}
  11. ul li:nth-child(2) .content{ background-color: #00f;}
  12. ul li:nth-child(3) .content{ background-color: #f0f;}
  13. 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结构

  1. <!--HTML-->
  2. <ul>
  3. <li>
  4. <div class="content" id="content1">选项一内容</div>
  5. <a href="#content1">选项一</a>
  6. </li>
  7. <li>
  8. <div class="content" id="content2">选项二内容</div>
  9. <a href="#content2">选项二</a>
  10. </li>
  11. <li>
  12. <div class="content" id="content3">选项三内容</div>
  13. <a href="#content3">选项三</a>
  14. </li>
  15. </ul>

这种方式的HTML结构相对比较简单,不需要使用隐藏的单选框作为媒介,而是使用锚链接和:target作为连接“选项”与“选项内容”之间的桥梁。

另外需要注意以下两点:

① 每个a标签的href属性须与其兄弟节点.content元素的id值一致
② .content元素与a标签的顺序不能更改

2. CSS样式

  1. /*CSS*/
  2. *{ margin: 0; padding: 0;}
  3. a{ text-decoration: none; color: #000;}
  4. ul{ position: relative; width: 300px; margin: 100px auto;}
  5. ul li{ list-style: none;}
  6. 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;}
  7. ul li:last-child a{ border-right: 1px solid #000;}
  8. 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;}
  9. ul li:nth-child(1) .content{ background-color: #0f0;}
  10. ul li:nth-child(2) .content{ background-color: #00f;}
  11. ul li:nth-child(3) .content{ background-color: #f0f;}
  12. ul li .content:target{ opacity: 1;}
  13. ul li .content:target+a{ color: #fff; background-color: #000;}

这里同样有几个重点需要注意:

“.content:target” 将锚链接指向的当前.content元素应用样式
“.content:target+a” 将锚链接指向的当前.content元素后紧邻的a元素应用样式

本文重点总结

无需JS,利用单选框或锚链接,再配合一些CSS样式即可制作简单的Tab切换

教你两招用纯CSS写Tab切换的更多相关文章

  1. CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)

    是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...

  2. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  3. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  4. 纯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 ...

  5. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  6. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  7. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  8. 手把手教你打造一个纯CSS图标库

    来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...

  9. 纯css实现tab导航

    仿照这个 实现了一个纯css的导航功能 html <div class="main"> <div id="contain1">列表一内容 ...

随机推荐

  1. 信通院发布《云计算发展白皮书 (2019年) 》 (附PPT解读)

    来源: 中国信息通信研究院CAICT 为了进一步促进云计算创新发展,建立云计算信任体系,规范云计算行业,促进市场发展,提升产业技术和服务水平.由中国信息通信研究院(以下简称“中国信通院”)主办,中国通 ...

  2. 基于Jenkins的开发测试全流程持续集成实践

    今年一直在公司实践CI,本文将近半年来的一些实践总结一下,可能不太完善或优美,但的确初步解决了我目前所在项目组的一些痛点.当然这仅是一家之言也不够完整,后续还会深入实践和引入Kubernetes进行容 ...

  3. 利用Python写一个抽奖程序,解密游戏内抽奖的秘密

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 极客挖掘机 PS:如有需要Python学习资料的小伙伴可以加点击下 ...

  4. koa2使用es7 的装饰器decorator

    本文主要讲述我在做项目中使用装饰器(decorator)来动态加载koa-router的路由的一个基础架构. 目前JavaScript 对decorator 是不支持,但是可以用babel 来编译 既 ...

  5. Dynamics 365客户端编程示例:获取当前用户的信息,表单级通知/提示,表单OnLoad事件执行代码

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  6. ksoap2 android 调用WebService

    webService,soap,wsdl的基本概念? 详情请看维基百科 基于soap 1.1, soap 1.2 的请求和响应数据源 查找了很久都是基于json格式传输数据,但是最终还是找到了基于xm ...

  7. springboot配置文件(一)

    一.YAML语法 1.基本语法 k 空格 v 表示一对键值对(必须有空格),以空格的缩进来控制层级关系,只要是左对齐的一列数据,都表示同一个层级.属性和值大小写敏感 server: port: 808 ...

  8. 误删mysql root账户

    看这个账户有点碍眼就删除了,结果异常了mysql> select user,host from mysql.user;+---------------+-------------+| user ...

  9. linux之任务调度,磁盘分区,yum下载

    一.crond任务调度 调度机制: 基本语法 crontab [选项] -e : bianji crontab定时任务 -l : 查询crontab -r : 删除当前用户所有的crontab任务 例 ...

  10. [考试反思]1110csp-s模拟测试109:细节

    细节...决定成败 T2数组开小,T3long long没开够. 而且其实不止这样,考试结束前15分钟发现了好多低错: T3双向边没开2倍.dfs没递归调用.T2为了调试bitset开20没改(后来改 ...