想实现点击某个按钮跳转至某个页面不知哪里做错了，无法跳转，求解答啊。代码：<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 回答
- 0 关注
- 1860 浏览
添加回答
举报
0/150
提交
取消