css3不能实现页面跳转.
想实现点击某个按钮跳转至某个页面不知哪里做错了，无法跳转，求解答啊。
代码：
<body>
<div class="zhuti">
<div class="neirong">
<!--导航栏-->
<input type="radio" name="radio-set" checked="checked" id="anniu1"/>
<a href="#nran1">页面1</a>
<input type="radio" name="radio-set" id="anniu2"/>
<a href="#nran2">页面2</a>
<input type="radio" name="radio-set" id="anniu3"/>
<a href="#nran3">页面3</a>
<input type="radio" name="radio-set" id="anniu4"/>
<a href="#nran4">页面4</a>
<input type="radio" name="radio-set" id="anniu5"/>
<a href="#nran5">页面5</a> </div>
<!--导航结束-->
<!--内容开始-->
<div class="nrer">
<section class="nrcss1" id="nran1">
<div class="nrtu1">头上图片</div>
<h2>一个标题</h2>
<p>很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容</p>
</section>
<section class="nrcss1" id="nran2">
<div class="nrtu1">头上图片</div>
<h2>二个标题</h2>
<p>很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容</p>
</section>
<section class="nrcss1" id="nran3">
<div class="nrtu1">头上图片</div>
<h2>三个标题</h2>
<p>很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容</p>
</section>
<section class="nrcss1" id="nran4">
<div class="nrtu1">头上图片</div>
<h2>四个标题</h2>
<p>很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容</p>
</section>
<section class="nrcss1" id="nran5">
<div class="nrtu1">头上图片</div>
<h2>五个标题</h2>
<p>很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容</p>
</section>
</div>
</div>
</body>
css部分：
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.zhuti, html, body {
height: 100%;
}
body {
background: #ddd;
font-size: 15px;
font-weight: 400;
color: #333;
overflow: hidden;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a {
text-decoration: none;
color: #555;
}
.neirong {
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.neirong>input, .neirong>a {
width: 20%;
height: 34px;
line-height: 34px;
position: fixed;
bottom: 0;
cursor: pointer;
}
.neirong>input {
opacity: 0;
z-index: 1000;
}
.neirong>a {
z-index: 10;
font-size: 16px;
background: #e23a6e;
font-weight: 700;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
#anniu1, #anniu1+a {
left: 0%;
}
#anniu2, #anniu2+a {
left: 20%;
}
#anniu3, #anniu3+a {
left: 40%;
}
#anniu4, #anniu4+a {
left: 60%;
}
#anniu5, #anniu5+a {
left: 80%;
}
.neirong input:checked+a, .neirong input:checked:hover+a {
background: #821134;
}
.neirong input:checked+a:after {
width: 0;
height: 0;
content: "";
position: absolute;
overflow: hidden;
bottom: 100%;
border: 30px solid transparent;
left: 50%;
margin-left: -30px;
border-bottom-color: #821134;
}
.neirong input:hover+a {
background: #ad244f;
}
/*.stcolor {
}*/
.nrer {
left: 0;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.nrcss1 {
overflow: hidden;
background: #fff;
}
.nrer, .nrcss1 {
width: 100%;
height: 100%;
position: relative;
}
#anniu1:checked ~ .nrer{
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
}
#anniu2:checked ~ .nrer{
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
#anniu3:checked ~ .nrer{
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
#anniu4:checked ~ .nrer{
-webkit-transform: translateY(-300%);
-ms-transform: translateY(-300%);
-o-transform: translateY(-300%);
-moz-transform: translateY(-300%);
transform: translateY(-300%);
}
#anniu5:checked ~ .nrer{
-webkit-transform: translateY(-400%);
-ms-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
transform: translateY(-400%);
}
无心学1回答
-
无心学
自己找到答案了，是因为class “zhuti” 没有包裹到位。改一下就可以了。
随时随地看视频慕课网APP
相关分类
CSS3