「这是我参与11月更文挑战的第二十二天,活动详情查看:2021最后一次更文挑战」。
往期链接:
「CSS之选择器」
前言
今天我们要说的是 <label> 和 <input>
这两个标签选择器,通过 <label>
的 for 属性与input属性挂钩实现奇妙的效果。接下来我们就用这两个选择器来实现一个标签导航功能。
<label> 和 <input>
使用<label>
标签for属性挂钩<input>
标签的 id,可将<input>
标签的鼠标点击选择事件挂载到<label>
标签上,由<label>
标签回调点击选中状态。此时可以将<input>
标签设置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!!!