表单的label标签的使用技巧

Posted 2020-08-28

先看下面的代码：
<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{}