表单的label标签的使用技巧

先看下面的代码:
<form>
<ul id="tabs">
<li>
<input type="radio" name="tabs" id="tab1" />
<label for="tab1">按钮1</label>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">按钮2</label>
</li>
</ul>
</form>
效果:

在点击文字时,选框会被自动选中,

  ①,增加了文字与选框的关联性

  ②,减少js的使用,例如我使用的angular,关于效果的js比较难写,下面这个例子就是我使用的一个方法

      这个就是使用这个技巧写的,input被想办法隐藏掉,至于选中之后效果的切换css可以这样写:

      ul#tabs [id^="tab"]:checked + label{}


posted @ 2017-01-22 09:43  言笑  阅读(294)  评论(0编辑  收藏  举报