使用CSS实现Tab切换效果最近在切页面的时候，涉及到一部分tab切换，因为不想用js，想着能不能用纯CSS选择器达到开关效果。搜索了一下，大致有3种写法。使用:hover选择器的缺点：仅当鼠标在元素上时，默认无法选中显示效果。使用a标签的锚点+:target选择器缺点：因为锚点会把选中的元素滚动到页面顶部，每次换位置都要移动，体验极差。使用label和radio的绑定关系，选中radio时:checked来实现效果缺点：HTML结构元素比较复杂经过实验发现第三种方式效果最好。那么我们来说说第三种实现方式。这种方法的写法是不固定的。查资料的时候，各种写法让我一时间摸不着头脑。最后看完，发现大体思路是一样的，无非就是以下几个步骤。绑定label和radio：不用说了，绑定id和for属性隐藏radiobutton：有很多种方法可以发挥你的想象力。我见过的方法包括设置display:none;隐藏，并设置绝对定位，将left设置为一个较大的负值，移动到页面外部，实现隐藏效果，设置绝对定位：使元素脱离文档流，然后设置opacity:0；以透明来达到隐藏的效果。隐藏多余标签页：同上，也可以通过z-index设置层级关系，相互屏蔽。设置默认项：给默认按钮添加checked="checked"属性，设置选中效果：使用+选择器和~选择器设置选中对应元素时下方标签页的样式，实现选中效果/*当radio为选中状态时设置其test-label兄弟元素的属性*/input[type="radio"]:checked+.test-label{/*修改已有的border背景属性*/border-颜色：#cbcccc；边框底部颜色：#fff；背景：#fff；/*为了修改已有的level，下边框覆盖下面div的上边框*/z-index:10;}/*设置和radio选中时一样的leveltab-的显示级别boxelement*/input[type="radio"]:checked~.tab-box{/*选中时增加层级，屏蔽其他tab页，达到选中切换的效果*/z-index:5;}这样就可以实现一个标签页切换的效果，不用一点js，当然兼容性问题肯定有。实际操作中，tab页还是用js比较好。下面是小demo的代码。样式很多，主要是为了实现各种选择效果。真正用来实现选择和切换目的的核心代码只是几行demo地址代码：
