前段时间有人向我提过一个问题：“怎么使用css实现点击操作。”
我想了下倒也不是不可以，在解答了之后觉得有趣，刚好最近也准备写点博客什么的，便拿来做素材吧。
具体实现思路：在点击块上添加一个隐藏的单选input，然后在css里使用选择器判断当前选中块。做出显示或隐藏其他块。整体代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <style> section{ margin-top:100px; margin-left: 100px; } .title{ font-size: 0;/* 清除盒模型之间的间隙 */ } .box{ display: inline-block; position: relative; font-size: 18px; left:0; top:0; color:#b1b1b1; border-color: #b1b1b1; margin-right: 10px; border:1px solid #ccc; border-bottom: 0; line-height: 20px; width:200px; text-align: center; border-top-right-radius: 10px; border-top-left-radius: 10px; } .box>input{ position: absolute; opacity: 0;/* 让ie什么的去死吧 */ width:100%; left:0; top:0; height:100%; z-index: 1; } .box>input:hover{ cursor:pointer; } .content{ display: none; text-align: left; color:#666; position: absolute; left:-1px; top:56px; border: 1px solid #ccc; padding:10px; width:414px; box-sizing: border-box; /* 方便计算宽度 */ border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } input[name=title]:checked+p{ /* 这里是重点 */ color:#53d9ef; } input[name=title]:checked+p+div{ /* 这里是重点 */ display: block; } .regression{ /* 毕竟是css,闹着玩的嘛 */ margin-left: -212px; } </style> <section> <div class="title"> <div class="box"> <input type="radio" checked name="title" > <p>夏天的微风</p> <div class="content"> <p>夏天的风轻轻的吹过……</p> </div> </div> <div class="box"> <input type="radio" name="title" > <p>冬天的雪</p> <div class="content regression" > <p>雪下的那么认真……</p> </div> </div> </div> </section> </body> </html>
重点代码：
input[name=title]:checked+p{ /*选择器会玩就行~*
color:#53d9ef;
}
input[name=title]:checked+p+div{ /* 和上面一样 */
display: block;
}
以上就是这次分享的全部内容了;
第一篇文章，如写的不好请指出。