先看下面的代码:
![Image1.png](http://upload-images.jianshu.io/upload_images/4044149-f7a27e11b659c021.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
效果:
![Image2.png](http://upload-images.jianshu.io/upload_images/4044149-a5fa2a8aec477df3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在点击文字时,选框会被自动选中,
①,增加了文字与选框的关联性
②,减少js的使用,例如我使用的angular,关于效果的js比较难写,下面这个例子就是我使用的一个方法
![Image3.png](http://upload-images.jianshu.io/upload_images/4044149-1fc5a7aa717214a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这个就是使用这个技巧写的,input被想办法隐藏掉,至于选中之后效果的切换css可以这样写:
ul#tabs [id^="tab"]:checked + label{}
![Image1.png](http://upload-images.jianshu.io/upload_images/4044149-f7a27e11b659c021.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
效果:
![Image2.png](http://upload-images.jianshu.io/upload_images/4044149-a5fa2a8aec477df3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在点击文字时,选框会被自动选中,
①,增加了文字与选框的关联性
②,减少js的使用,例如我使用的angular,关于效果的js比较难写,下面这个例子就是我使用的一个方法
![Image3.png](http://upload-images.jianshu.io/upload_images/4044149-1fc5a7aa717214a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这个就是使用这个技巧写的,input被想办法隐藏掉,至于选中之后效果的切换css可以这样写:
ul#tabs [id^="tab"]:checked + label{}