我们知道表单里面有按钮元素和复选框元素，如下：
<input type="radio" >
<input type="checkbox" >
这两个元素都能实现单击效果，即他们可以触发动态伪类选择器checked
表现为该实例就是 input:checked{} 即单击发生一个css修饰，属于动态变化，和hover有点像，hover是移入发生变化，这里是单击发生变化。
我们还知道表单里面有个常用的label标签,常配合于这两个元素，此时我们可以利用label绑定按钮或复选框，然后利用css同级选择器实现动态修改label的样式，模拟js的单击click效果。具体实例为：
<input type="radio" id="a" name="f" >
<label for="a">不分期</label>
<input type="radio" id="b" name="f">
<label for="b">分3期</label>
此时我们使用动态伪类选择器配合同级选择器模拟label单击动态改变样式。
css代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css高级应用之简单选项卡</title>
<style>
*{
margin: 0;
padding: 0;
}/* css初始化 */
input{
display: none;
}/* 隐藏input,铺垫模拟单击label(其实是靠label的for属性绑定按钮的单击效果) */
label{
width: 100px;
height: 100px;
text-align: center;
line-height: 50px;
color: black;
display: inline-block;
border: 1px solid black;
margin: 20px;
}/* label初始化 */
input:checked + label{
border: 1px solid red;
color:red;
}
/* 重点!此时我们利用按钮的动态伪类实现单击改变样式,接着利用同级选择器,
将该动态改“传递”给label,而又由于我们label一开始绑定了按钮,单击label即触
发了单击按钮，所以实现了,单击label改变label自身,实现简单的选项卡效果 */
</style>
</head>
<body>
<input type="radio" id="a" name="f" >
<label for="a">不分期</label>
<input type="radio" id="b" name="f">
<label for="b">分3期</label>
<input type="radio" id="c" name="f">
<label for="c">分12期</label>
</body>
</html>
效果图：
其实原理就是利用按钮和复选框的checked伪类选择器，然后修改同级label的样式（同时将label绑定按钮的单击事件并隐藏input按钮）模拟单击选项卡效果。
此处将label按照设计初始化修饰可以模拟商城的选项卡，类似于京东：
我们还可以利用此原理制作折叠菜单，希望大家能自己思考，写得很粗糙，主要是提供一个思路，不懂的可以留言！我看到就会回复。
1323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
