选项卡对于前端来说是一个熟悉的不能再熟悉的词了，用js也很容易实现，自己无聊之下用纯CSS实现，把自己的思路贡献给大家，自己水平有限用了两种方法，如果有路过的大神希望提供更多的思路~
选项卡的核心是什么，是当一个元素有事件产生的时候，去影响另外一个元素的某些CSS属性（display、z-index…）
我们一般指的事件是click啊、mouseover啊，CSS中可没办法实现这样的，不过CSS中有hover，这个放在后面说，我们先来利用hash的变换配合:target选择器实现选项卡功能
1、使用:target选择器
注意：IE8及其以下不支持
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #wrap{ width:600px; height:400px; border:5px solid red; margin:10px auto;} body,ul{ margin:0; padding:0;} li{ list-style:none;} #title{ margin:5px 0 0 110px;} #title a{ float:left; width:118px; height:40px; text-align:center; line-height:40px; border:1px solid black; margin-right:10px; cursor:pointer;} .clear{ zoom:1;} .clear:after{ content:''; display:block; clear:both;} #content{ margin:0 0 0 110px; position:relative;} #content li{ border:1px solid black; position:absolute; left:0px; top:10px; width:378px; height:300px; display:none; background:white;} #content li:target{ display:block;} //重点 </style> </head> <body> <div id="wrap"> <ul id="title" class="clear"> <a class="active" href="#d1">1</a> <a href="#d2">2</a> <a href="#d3">3</a> </ul> <ul id="content"> <li id="d1">11111</li> <li id="d2">22222</li> <li id="d3">33333</li> </ul> </div> </body> </html>
直接复制保存浏览器打开就好，再次提示IE8及其以下不支持
原理就是利用点击a标签，然后url会更改href对应的hash，然后#content li:target变换，实现选项卡
注意：:target中找到的hash必须是其元素的id，代码中a中的href对应li的id
不足：当刚打开的时候地址栏没有hash的时候，#content中所有li的display都是none，给用户看到的内容部分都是空的
解决办法其实也很简单:
#d1{ display:block}
默认第一个li的display是block就可以了，反正后面的li变成block的时候可以把它遮住
不过自己挺有强迫症的，但折腾了半天也没能实现同一时刻#content内容区域只有一个div是display为block
尝试了:not选择器，fail！
尝试了counter配合z-index,这两者根本就不能配合！counter貌似只能配合content，fail！
晕晕晕，不纠结这个了，看一下个方法实现，如果有人知道如何实现，希望指点一二，万分感谢！
2、使用~选择符
注意：不支持IE8及其以下，这个方法非常的不方便，原因有三
第一是布局复杂麻烦，第二是布局复杂麻烦，第三是布局复杂麻烦，重要的事说三遍
大家也就是看着乐呵乐呵好了，百分百不实用的方法
代码如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #wrap{ width:600px; height:400px; border:5px solid red; margin:10px auto; position:relative;} body,ul,input{ margin:0; padding:0;} li{ list-style:none;} .box{ width:400px; height:350px; position:absolute; left:100px; top:50px;} .title{ width:120px; border:1px solid black; position:absolute; height:40px; cursor:pointer; text-align:center; line-height:40px; top:-40px;} input{ display:none;} .box:nth-of-type(1) .title{ left:0;} .box:nth-of-type(2) .title{ left:130px;} .box:nth-of-type(3) .title{ left:260px;} .content{ width:380px; height:300px; position:absolute; top:10px; left:0; border:1px solid black; background-color:white; display:none;} .title:hover{ background-color:red;} input.title:checked ~ li{ display:block;} </style> </head> <body> <div id="wrap"> <ul class="box"> <label for="d1" class="title">1</label> <input type="radio" class="title" name="r" id="d1" /> <li class="content" style="display:block">111</li> </ul> <ul class="box"> <label for="d2" class="title">2</label> <input type="radio" class="title" name="r" id="d2" /> <li class="content">222</li> </ul> <ul class="box"> <label for="d3" class="title">3</label> <input type="radio" class="title" name="r" id="d3" /> <li class="content">333</li> </ul> </div> </body> </html>
原理是用过点击radio然后用过:checked这个选择器获取到元素，然后用过~选择符获取到content内容部分
因为~只支持相邻元素，很操蛋的布局，而且为了隐藏radio控件也花了心思
刚开始尝试将radio的透明度设置为0，成功倒也可以，可是一点交互效果也没有了
比方说鼠标在经过上面title部分没法实现变色，因为radio层级最高，给它设置background这一个属性没有效果，让另外一个元素遮住radio的话又无法实现点击选取
通过label勉强能实现鼠标经过时title变色，但是鼠标移开又没有了，其实第一种方法也只能实现到如此结局
求助纯CSS能否实现像js中那样，上面title为active状态时有背景颜色，同时下面content为active状态时显示内容
表述的可能有点复杂……语文一直是体育老师教的
这就是我给出的两个纯CSS打造选项卡的栗子……
其实纯CSS打造nav子栏目还是挺方便的，配合:hover，这里就不给出栗子啦
结语：好久没有写东西了，这次赶紧补一篇文章。最近好忙，六月份去实习，力争这段时间把自己的知识给总结再扩充扩充，毕竟不能过去太丢人嘛。之前说签了阿里，后面个人原因选择去企鹅了，不管怎么样，努力学习！