label实现轮播点击图效果

1、先了解label与input的联系

<!--正常下 -->
    用户名：<input type="text" /> 密码：<input type="password" /><br /><br />
    <!--<label>标签的作用是为鼠标用户改进了可用性，
        当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；
       < label> 标签的 for 属性应当与相关元素的 id 属性相同。
    -->
    <label for="username">用户名</label>
    <input type="text" id="username" />

<label>标签的作用是为鼠标用户改进了可用性，
当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；
< label> 标签的 for 属性应当与相关元素的 id 属性相同。

2、实现效果

先看结构html

<ul>
    <li>
      <input type="radio" id="content1" checked name="inp1" />
      <label for="content1">选项一</label>
      <div>选项一的内容</div>
    </li>
    <li>
      <input type="radio" id="content2" name="inp1" />
      <label for="content2">选项二</label>
      <div>选项二的内容</div>
    </li>
    <li>
      <input type="radio" id="content3" name="inp1" />
      <label for="content3">选项三</label>
      <div>选项三的内容</div>
    </li>
  </ul>

 再看样式

 * {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    ul {
      width: 400px;
      height: 300px;
      border: 10px solid red;
      margin: 50px auto;
      position: relative;
    }

    ul label {
      float: left;
      width: 100px;
      height: 40px;
      border: 1px solid black;
    }

    ul input {
      display: none;
    }

    ul div {
      width: 100%;
      height: 260px;
      background-color: pink;
      position: absolute;
      top: 40px;
      opacity: 0;
    }

    input:checked~div {
      opacity: 1;
    }