在开发中看见仅使用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样式不起作用。