html radio怎么绑定切换时间,HTML使用Radio Input来实现Tab切换

在开发中看见仅使用css技巧，就用HTML的Radio Input来实现的Tab的切换，连click事件都未使用。代码效果如下：

input {

display: none;

}

input:checked + label {

color: #2d3538;

border-top: 2px solid #148ac4;

border-bottom: 1px solid #fff;

background-color: white;

}

label:hover {

cursor: pointer;

background: #148ac4 ;

}

.label-tab {

display: inline-block;

width: 100px;

padding: 0 10px 0 10px;

text-align: center;

background: #eee;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

}

.fa {

padding-right: 5px;

}

.tab-panel {

visibility: hidden;

position: absolute;

width: 300px;

height: 100px;

border: 1px solid #333;

}

#admin-tab:checked ~ #admin-panel,

#user-tab:checked ~ #user-panel {

visibility: visible;

}

管理员

普通用户

我是管理员

我是普通用户

1. label的for属性要和对于的input的id值保持一致，点击label时才能相当于点击了对应的radio button。

2. 使用#admin-tab:checked ~ #admin-panel之类样式来设置对应的panel是否显示。

3. 使用input:checked + label来设置label选中后的样式效果。

4. 使用label:hover来设置鼠标在label上的样式效果。

5. 图标使用了流行的font-awesome，即对应相应的图标。

6. label的display需要设置成块级显示，否则width样式不起作用。