说明

又是一个练手的小玩意儿,本身没什么技术含量,就是几个不常用的CSS3特性的结合而已。

要点

  • Label标签的for属性

  • 单选框的:checked伪类

  • CSS的加号[+]选择器

效果图

原理

通常tab页的交互都是点击tab头然后展示对应的一块内容,这种排他性跟HTML里面的某个原住民很类似,是啥呢?没错!就是单选框组。

单选框组有一个:checked伪类,可以设定单选框被选中后的样式,所以我们要把一组单选框当做tab页的头部么?当然不是,单选框是很固执的,用CSS去感化他是很吃力的,那怎么办呢?

这里就要用到CSS里面的+选择器了[实际上这个选择器我之前从来没用过-_-||],简单来说+选择器就是选择紧跟在某个指定元素后面的另一个指定的元素,具体介绍请看 http://www.w3school.com.cn/cs...

Label的for属性是一个很有意思的东西,可以理解为一个遥控器:位于页面底部的一个label标签可以通过for属性来控制页面顶部的一个单选框或者复选框~,是不是很神奇?(噗→_→)

结合以上特点,可以得到一个实现tab页的基本思路:

一个单选按钮后面跟一个lable[tab头],再后面跟上一个div[tab内容块]
用.radio:checked + .tab-header 指定当前tab头的样式
用.radio:checked + .tab-header + .tab-content 指定当前tab内容块的样式

代码

<div class="container">
<div class="tab-wrapper">
<!--tab section 1-->
<input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>
<label for="tab-radio-1" class="tab-handler tab-handler-1">水浒传</label>
<div class="tab-content tab-content-1">《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说,以宋江领导的起义军为主要题材,通过一系列梁山英雄反抗压迫、英勇斗争的生动故事,暴露了北宋末年统治阶级的腐朽和残暴,揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。按120回本计,前70回讲述各个好汉上梁山,后50回主要为宋江全伙受招安为朝廷效力,以及被奸臣所害。</div>
<!--tab section 2-->
<input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-2">
<label for="tab-radio-2" class="tab-handler tab-handler-2">三国演义</label>
<div class="tab-content tab-content-2">《三国演义》是中国古典四大名著之一,全名为《三国志通俗演义》。作者是元末明初小说家罗贯中,是中国第一部长篇章回体历史演义小说。描写了从东汉末年到西晋初年之间近105年的历史风云。全书反映了三国时代的政治军事斗争,反映了三国时代各类社会矛盾的转化,并概括了这一时代的历史巨变,塑造了一批叱咤风云的三国英雄人物。</div>
<!--tab section 3-->
<input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-3">
<label for="tab-radio-3" class="tab-handler tab-handler-3">西游记</label>
<div class="tab-content tab-content-3">《西游记》是中国古典四大名著之一,是由明代小说家吴承恩所创作的中国古代第一部浪漫主义的长篇神魔小说。主要描写了唐朝太宗贞观年间孙悟空、猪八戒、沙僧、白龙马四弟子保护唐僧西行取经,沿途历经九九八十一难,一路降妖伏魔,化险为夷,最后到达西天,取得真经的故事。取材于《大唐三藏取经诗话》和汉族民间传说。 [1] </div>
<!--tab section 4-->
<input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-4">
<label for="tab-radio-4" class="tab-handler tab-handler-4">红楼梦</label>
<div class="tab-content tab-content-4">《红楼梦》,中国古典四大名著之首,清代作家曹雪芹创作的章回体长篇小说[1] 。早期仅有前八十回抄本流传,八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本[2] ,定名《红楼梦》。亦有版本作《金玉缘》。</div>
</div>
</div>

HTML部分如上,四个区块,四大名著,嘎嘎

html,body{
height: 100%;
margin: 0;
padding: 0;
background-color: #58596b;
}
.container{
width: 800px;
height: 400px;
margin: 100px auto;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.tab-wrapper{
position: relative;
width: 800px;
height: 60px;
background-color: #33344a;
}
.tab-wrapper .tab-radio{
display: none;
}
.tab-handler{
position: relative;
z-index: 2;
display: block;
float: left;
height: 60px;
padding: 0 40px;
color: #717181;
font-size: 16px;
line-height: 60px;
transition: .3s;
transform: scale(.9);
}
.tab-radio:checked + .tab-handler{
color: #fff;
background-color: #e74c3c;
transform: scale(1);
}
.tab-radio:checked + .tab-handler + .tab-content{
visibility: visible;
opacity: 1;
transform: scale(1);
}
.tab-wrapper .tab-content{
visibility: hidden;
position: absolute;
top: 60px;
left: 0;
width: 740px;
padding: 30px;
color: #999;
font-size: 14px;
line-height: 1.618em;
background-color: #fff;
opacity: 0;
transition: transform .5s, opacity .7s;
transform: translateY(20px);
}

CSS代码如上,写的很烂,轻喷~
用visibility+opacity来控制元素的显示和隐藏,实际上是为了实现动画效果(此处有装逼的嫌疑),因为display会阻碍transition,而visibility不会,另外也可以用pointer-events+opacity来代替。


代码就上面那些了,另附jsbin地址:http://output.jsbin.com/cicadu/4
在新版opera/chrome/firefox测试完美,safari上面有严重问题,貌似切换了tab之后,tab内容块的样式已经应用了然而却没有生效,目测页面没有重绘?在开发者工具里面将其focus一下才生效,具体原因未知,有哪位大神知道的请不吝赐教。

用纯CSS实现优雅的tab页的更多相关文章

  1. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  3. 如何用纯 CSS 创作一个记事本翻页动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKOPGw 可交互视频教 ...

  4. js进阶 11-21 纯css实现选项卡

    js进阶 11-21 纯css实现选项卡 一.总结 一句话总结:核心原理,a标签的锚点效果+父div限宽+多的部分隐藏. 1.如何实现a标签的锚点效果? href属性找到对应的位置就好,和选择器一样, ...

  5. 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. 纯 CSS 方式实现 CSS 动画的暂停与播放!

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

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

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

  8. 教你两招用纯CSS写Tab切换

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

  9. 用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...

随机推荐

  1. python os.system 和popen

    1.python  os.system 和popen  其中第一个只会返回0或者1,另外一个会返回执行结果 每天生成一个文件,并把磁盘的使用情况写到到这个文件中,文件名为日期格式(yyyy-mm-dd ...

  2. git命令合集

    ##快捷键 ##一. 快捷键 1. 清屏快捷键 control+L 2. vim快捷操作 * control+b 往上翻页 * Control+f 往下翻页 * shift+g 回到末尾 3. oh ...

  3. 大学英语四级之听力Key Words

    Key Words关键词 所谓关键词,指的是短文中能够标志着正确答案的词,也就是说,关键词后面往往是正确答案 听力中的关键词可为宏观和微观两方面,一般出现在如下10种位置. 一.宏观方向(主旨大意) ...

  4. JZ-045-扑克牌顺子

    扑克牌顺子 题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张_)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的 ...

  5. mysql中创建函数时报错信息

    报错信息如下 ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its ...

  6. dedeCMS自定义dede标签

    在include/taglib文件夹中新建文件hlh.lib.php,其中hlh也就是你标签的名字,function的名字也必须跟文件名对应,固定格式lib_标签名,如lib_hlh,本例子以调取文章 ...

  7. 结合AngularJS实现拖拽

    最近项目中要实现,左侧树向右侧树中元素的拖拽功能,开始在网上看了好多ng-drag等等操作,都没有实现预想的效果,偶然发现一篇博客,然后根据博客改编,实现了自己想要的效果.下面简单的分析一下实现过程. ...

  8. angular1使用echarts2绘制图标

    一.绘制柱状图:直接上代码 1.首先下载echarts-all文件(这里就不赘述了),然后是创建一个bar.js及内容如下: bar.js内容: var app = require("../ ...

  9. 快速整明白Redis中的字典到底是个啥

    字典简介 字典是一种用于保存键值对的数据结构,可以通过键值对中的键快速地查找到对应的值.在Redis所使用的C语言中,并没有内置字典,所以Redis自己实现了字典. 整个Redis数据库的所有的键和值 ...

  10. 聊聊磁盘 IO

    常见的磁盘类型 按存储原理的不同,可以把磁盘分为这么几种 HDD 盘:没啥说的,就是平时最常见的机械盘. SSD 盘:用电信号来记录存储数据,而不是磁片.显然进行 I/O 时,这要比机械盘的物理寻址方 ...