不知道为什么不能切换
代码看着没问题，不知道为什么不能切换
2 回答
<div class="containt">
<div class="head">
<input type="radio" name="sub_nav" id="sub1" checked="checked"><a href="#navct1">SUNDAY</a>
<input type="radio" name="sub_nav" id="sub2"><a href="#navct2">FRIDAY</a>
<input type="radio" name="sub_nav" id="sub3"><a href="#navct3">MONDAY</a>
<input type="radio" name="sub_nav" id="sub4"><a href="#navct4">SATARDAY</a>
<input type="radio" name="sub_nav" id="sub5"><a href="#navct5">febraday</a>
</div>
<div class="panelct">
<section class="panel" id="navct1">内容一11111111111</section>
<section class="panel" id="navct2">内容二2222222222222222222</section>
<section class="panel" id="navct3">内容三3333333333333</section>
<section class="panel" id="navct4">内容四444444444444</section>
<section class="panel" id="navct5">内容五55555555555555</section>
</div>
<div class="head">
<input type="radio" name="sub_nav" id="sub1" checked="checked"><a href="#navct1">SUNDAY</a>
<input type="radio" name="sub_nav" id="sub2"><a href="#navct2">FRIDAY</a>
<input type="radio" name="sub_nav" id="sub3"><a href="#navct3">MONDAY</a>
<input type="radio" name="sub_nav" id="sub4"><a href="#navct4">SATARDAY</a>
<input type="radio" name="sub_nav" id="sub5"><a href="#navct5">febraday</a>
</div>
<div class="panelct">
<section class="panel" id="navct1">内容一11111111111</section>
<section class="panel" id="navct2">内容二2222222222222222222</section>
<section class="panel" id="navct3">内容三3333333333333</section>
<section class="panel" id="navct4">内容四444444444444</section>
<section class="panel" id="navct5">内容五55555555555555</section>
</div>
</div>
body,div,input,a{padding: 0;margin: 0}
body{
font-size: 15px;
font-weight: 400;
color: #333;
overflow: hidden;
font-smoothing:antialiased;
}
body,html{
height: 100%;
width: 100%
}
.containt{
width: 100%;
height: 100%;
}
.head{
width: 100%;
}
.head > input,.head >a{
width: 20%;
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
text-align: center;
cursor: pointer
}
.head > input{
z-index: 99;
opacity: 0;
position: absolute;
bottom: 0;
}
.head > a{
position: absolute;
bottom: 0;
z-index: 10;
font-size: 20px;
line-height: 40px;
background: #e23a6e;
text-decoration: none;
color:#fff;
font-weight: 700;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2)
}
#sub1,#sub1+a{
left: 0%;
}
#sub2,#sub2+a{
left: 20%;
}
#sub3,#sub3+a{
left: 40%;
}
#sub4,#sub4+a{
left: 60%;
}
#sub5,#sub5+a{
left: 80%;
}
.head input:checked + a{
background: #821134
}
/*动态生成小三角*/
.head input:checked + a:after{
content: "";
height: 0;
width: 0;
overflow: hidden;
border: 20px solid transparent;
border-bottom-color:#821134;
position: absolute;
bottom:100%;
left: 50%;
margin-left: -20px
}
.panelct,.panel{
width: 100%;
height: 100%;
position: relative;
}
.panelct{
left: 0;
top:0;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel{
background: #fff;
overflow: hidden;
}
#sub1:checked ~ .panelct{
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
#sub2:checked ~ .panelct{
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
#sub3:checked ~ .panelct{
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
#sub4:checked ~ .panelct{
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
#sub5:checked ~ .panelct{
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
举报
0/150
提交
取消
