前言
今天我们要说的是 和 这两个标签选择器，通过 的 for 属性与input属性挂钩实现奇妙的效果。接下来我们就用这两个选择器来实现一个标签导航功能。
使用标签for属性挂钩标签的 id，可将标签的鼠标点击选择事件挂载到标签上，由标签回调点击选中状态。此时可以将标签设置hidden属性给隐藏起来，不参与任何排版。
代码结构如下：
<input id="btn" type="radio" hidden> <div> <label for="btn"> </div> 复制代码
代码实现
接下来我们先看效果图：
代码如下：
<div class="bruce flex-ct-x" data-title="标签导航"> <div class="tab-navbar"> <input id="tab1" type="radio" name="tabs" hidden checked> <input id="tab2" type="radio" name="tabs" hidden> <input id="tab3" type="radio" name="tabs" hidden> <input id="tab4" type="radio" name="tabs" hidden> <main> <ul> <li>content1</li> <li>content2</li> <li>content3</li> <li>content4</li> </ul> </main> <nav> <label for="tab1">Tab1</label> <label for="tab2">Tab2</label> <label for="tab3">Tab3</label> <label for="tab4">Tab4</label> </nav> </div> </div> 复制代码
.active { background-color: pink; opacity: 0.5; color: #fff; } .tab-navbar { position: relative; display: flex; overflow: hidden; flex-direction: column; border-radius: 10px; width: 500px; height: 300px; input { &:nth-child(1):checked { & ~ nav label:nth-child(1) { @extend .active; } & ~ main ul { background-color: #f66; transform: translate3d(0, 0, 0); } } &:nth-child(2):checked { & ~ nav label:nth-child(2) { @extend .active; } & ~ main ul { background-color: #66f; transform: translate3d(-25%, 0, 0); } } &:nth-child(3):checked { & ~ nav label:nth-child(3) { @extend .active; } & ~ main ul { background-color: #f90; transform: translate3d(-50%, 0, 0); } } &:nth-child(4):checked { & ~ nav label:nth-child(4) { @extend .active; } & ~ main ul { background-color: #09f; transform: translate3d(-75%, 0, 0); } } } nav { position: absolute; width: 100%; bottom: 0; display: flex; height: 40px; background-color: white; line-height: 40px; text-align: center; label { flex: 1; cursor: pointer; transition: all 300ms; } } main { flex: 1; ul { display: flex; flex-wrap: nowrap; width: 400%; height: 100%; transition: all 300ms; } li { display: flex; justify-content: center; align-items: center; flex: 1; font-weight: bold; font-size: 20px; color: #fff; } } } 复制代码
好，今天就到这里了，今天努力的你依然是最棒的，Bye Bye！！！
