原理其实很简单，就是在每个列表里塞入一个肉眼看不见的<input>输入框，然后选项卡 按钮变成<label>元素，并通过 for 属性与<input>输入框的 id 相关联，这样，点击选项按 钮会触发输入框的 focus 行为，触发锚点定位，实现选项卡切换效果。
这种原理实现的选项卡还有一个优点就是，我们可以直接使用 Tab 键来切换、浏览各个选 项面板的内容，传统的选项卡实现并没有如此便捷的可访问性。
然而，上面这种技术要想用在实际项目中还离不开 JavaScript 的支持，一个是选项卡按钮 的选中效果，另一个就是处理列表部分区域在浏览器外面时依然会跳动的问题。
关键词： input 、 label 、 overflow: hidden
引用来自：张鑫旭
//注意：变量id一定要为数字！//需要引用jQuery包
$("#t1 a").click(function(){ //获取id为t1的div下面的所有a标签
var id = $(this).attr("id").substr(5)//截取当前点击的对象的id属性的第6位及之后的字符
$("#t1 a").attr("class","")//使所有的a标签的class样式都为空
$(this).attr("class","sel")//使被点击的a标签更换class样式为sel
$(".we").hide()//所有的class名为we的都隐藏
$("#w"+id).show()//让其中的一个class名为we并且id为w+id的div显示
})
