非你网

仅仅看表象，以为是 js 实现的效果，却是 css 实现的。这里有一个例子，利用 radio 的单选特性，实现单选效果。

步骤

1. 创建 input标签，邻居创建 span标签。
2. 父容器相对定位，input绝对定位，left，top为0，opacity为0。看不见看不见。
3. 利用 + ，~ 处理邻居 div。
4. 利用 checked 实现变化。

让 input 透明掉，其实就是让你去美化 span，不再需要 radio 那难看的容颜。是不是有点不道德啊。

请看 code：

<div class="box">

  <div class="tags-select">
    <label class="tag-select">
        <input type="radio" name="bye-type" value="1" checked>
        <span class="name">官方标配</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="2">
        <span class="name">官方标配 + 蓝牙耳机</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="3" disabled>
        <span class="name">官方标配 + 充电宝</span>
    </label>
  </div>

</div>

<!-- 利用radio唯一性，实现了不用js也能实现的效果。右边是 scss -->

.tags-select{
  font-size: 0;

  > .tag-select{
      position:relative;
      display:inline-block;
      font-size: 14px;
      margin: 5px;
      color: #fff;


     .name{
         display: block;
         line-height: 20px;
         padding: 8px 10px;
         border-radius: 5px;
         background-color: #FE7D91;
         cursor:pointer;
     }

     .name:hover{
         background-color: #FE3591;
     }

     input[type="radio"]{
         position:absolute;
         z-index: -1;
         opacity: 0;

         //选中
         &:checked +.name{
             background-color: #FE3591;
         }

         //禁用
         &:disabled +.name{
           background: #eee;
           color: #999;
           cursor: not-allowed;
         }
     }
  }
}

.box{
    display:flex;
    width:100%;
    height:100px;
    justify-content:center;
    align-items:center;
}

记得，上边使用了 scss。

效果

https://jsfiddle.net/vini123/ad30qpyb/