html制作多个tab页面,纯CSS打造双层Tab

写代码前的准备

一般来说，使用纯CSS实现Tab页面效果的常用方式是a标签和:target结合，但是这样实现有一个强迫症的地方：由于是使用a标签把页面“链接”到某个指定ID的元素上，因此浏览器的URL里会出现[#ID]的情况。而且，使用a标签也不好控制Tab导航按钮选中后的样式。

一组Tab标签页面可以看做是一组互斥的按钮：反正我每次都只能有一个按钮处于选中的状态。是不是觉得这个性质就像某个熟悉的html元素？对，就是单选按钮啊！单选按钮有一个伪类是:checked，更方便调整按钮选中后的样式啊！

所以这篇博客采用的方式是：

HTML:

CSS: xxx:checked{}

单层Tab实现

实现思路

有了开头部分的提示，思路应该就比较清晰了：使用一组radio button，选中某个选项的时候就展示这个选项对应的页面。

那么问题来了，咱们都知道，radio button自带的样式(小灰圈中间一个点)简直丑哭，不同的浏览器还有不同的渲染效果，而且很明显，想要拿CSS把这个丑哭的小灰圈感动成大方框中间还带字儿的那种效果显然不容易啊。不怕，网上那么多的美好的单选按钮样式也不是只能出现在设计师们的PSD中的啊，是时候拿出lable标签这个大法宝了。

: 定义和用法

标签为 input 元素定义标注(标记)。

元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在< label> 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。