说明
又是一个练手的小玩意儿，本身没什么技术含量，就是几个不常用的CSS3特性的结合而已。
要点
Label标签的for属性 单选框的:check伪类 CSS的加号[+]选择器效果图
原理
通常tab页的交互都是点击tab头然后展示对应的一块内容，这种排他性跟HTML里面的某个原住民很类似，是啥呢？没错！就是单选框组。
单选框组有一个:checked伪类，可以设定单选框被选中后的样式，所以我们要把一组单选框当做tab页的头部么？当然不是，单选框是很固执的，用CSS去感化他是很吃力的，那怎么办呢？
这里就要用到CSS里面的 +选择器 了[实际上这个选择器我之前从来没用过-_-||]，简单来说+选择器就是选择 紧跟在某个指定元素后面的另一个指定的元素 ，具体介绍请看 http://HdhCmsTestw3school测试数据.cn/cssref/selector_element_plus.asp
Label的for属性是一个很有意思的东西，可以理解为一个遥控器：位于页面底部的一个label标签可以通过for属性来控制页面顶部的一个单选框或者复选框~，是不是很神奇？（噗→_→）
结合以上特点，可以得到一个实现tab页的基本思路：
一个单选按钮后面跟一个lable[tab头]，再后面跟上一个div[tab内容块]
用.radio:checked + .tab-header 指定当前tab头的样式
用.radio:checked + .tab-header + .tab-content 指定当前tab内容块的样式
代码
水浒传
《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。按120回本计，前70回讲述各个好汉上梁山，后50回主要为宋江全伙受招安为朝廷效力，以及被奸臣所害。
查看更多关于用纯CSS实现优雅的tab页_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108939