点击按钮为什么页面没有跳转呢？是什么地方错误了？-慕课网

首页课程实战体系课手记专栏慕课教程

点击按钮为什么页面没有跳转呢？是什么地方错误了？

来源：2-2 导航页面切换（2）

qq_Sunshine_50

2015-12-31 22:25

我是严格按照视频写的代码，可是点击导航按钮页面为什么不能跳转呢？求各位大神指点。

<!doctype <!DOCTYPE html>

<html>

<head>

<mata charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>index</title>

<link type="text/css" rel="stylesheet" href="../normalize.css">

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="container">

<div class="st-container">

<input type="radio" name="radio-set" checked="checked" id="st-control-1">

<a href="#st-panel-1">Serendipity</a>

<input type="radio" name="radio-set" id="st-control-2">

<a href="#st-panel-2">Happiness</a>

<input type="radio" name="radio-set" id="st-control-3">

<a href="#st-panel-3">Tranquillity</a>

<input type="radio" name="radio-set" id="st-control-4">

<a href="#st-panel-4">Posibility</a>

<input type="radio" name="radio-set" id="st-control-5">

<a href="#st-panel-5">Passion</a>

</div>

<div class="st-scroll">

<section class="st-panel" id="st-panel-1">

<div class="st-desc" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

<section class="st-panel st-color" id="st-panel-2">

<div class="st-desc" data-icon="2"></div>

<h2>Happiness</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

<section class="st-panel" id="st-panel-3">

<div class="st-desc" data-icon="B"></div>

<h2>Posibility</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

<section class="st-panel st-color" id="st-panel-4">

<div class="st-desc" data-icon="X"></div>

<h2>Posibility</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

<section class="st-panel" id="st-panel-5">

<div class="st-desc" data-icon="C"></div>

<h2>Passion</h2>

<p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>

</section>

</div>

</div>

</body>

</html>

body{

font-family: Georgia,serif;

background: #ddd;

font-weight: 400;

font-size: 15px;

color:#333;

overflow: hidden;

-webkit-font-smoothing:antialiased;

}

a{

text-decoration: none;

color:#555;

}

.clr{

width:0;

height:0;

overflow: hidden;

clear: both;

padding:0;

margin:0;

}

.st-container{

width: 100%;

height: 100$;

position: absolute;

top: 0;

left: 0;

font-family: "Josefin Slab","Myrida Pro",Arial,sans-serif;

}

.st-container>input,

.st-container>a{

width:20%;

height:34px;

line-height: 34px;

position: fixed;

bottom: 0;

cursor: pointer;

}

.st-container>input{

z-index: 2;

opacity: 0;

}

.st-container>a{

z-index:1;

font-weight: 700;

font-size: 16px;

background: #e23ae6;

text-align: center;

color:#fff;

text-shadow:1px 1px 1px rgba(151,24,64,0.2);

}

#st-control-1,#st-control-1+a{

left: 0%;

}

#st-control-2,#st-control-2+a{

left: 20%;

}

#st-control-3,#st-control-3+a{

left: 40%;

}

#st-control-4,#st-control-4+a{

left: 60%;

}

#st-control-5,#st-control-5+a{

left: 80%;

}

.st-container input:checked+a,

.st-container input:checked:hover+a{

background: #821134;

}

.st-container input:hover+a{

background:#AD244F;

}

.st-container input:checked+a:after{

content:"";

width:0px;

height:0px;

overflow: hidden;

border:20px solid transparent;

border-bottom-color:#821134;

position: absolute;

bottom: 100%;

left:50%;

margin-left: -20px;

}

/*内容*/

.st-scroll,

.st-panel{

width: 100%;

height:100%;

position: relative;

}

.st-scroll{

left: 0;

top: 0;

transform:translate3d(0,0,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);

-webkit-backface-visibility:hidden;

transistion:all 0.6s ease-in-out;

-weibkit-transistion:all 0.6s ease-in-out;

-ms-transistion:all 0.6s ease-in-out;

-moz-transistion:all 0.6s ease-in-out;

-o-transistion:all 0.6s ease-in-out;

}

.st-panel{

background: #fff;

overflow: hidden;

}

#st-control-1:checked~.st-scroll{

transform:translateY(0%);

-o-transform:translateY(0%);

-ms-transform:translateY(0%);

-moz-transform:translateY(0%);

-webkit-transform:translateY(0%);

}

#st-control-2:checked~.st-scroll{

transform:translateY(-100%);

-o-transform:translateY(-100%);

-ms-transform:translateY(-100%);

-moz-transform:translateY(-100%);

-webkit-transform:translateY(-100%);

}

#st-control-3:checked~.st-scroll{

transform:translateY(-200%);

-o-transform:translateY(-200%);

-ms-transform:translateY(-200%);

-moz-transform:translateY(-200%);

-webkit-transform:translateY(-200%);

}

#st-control-4:checked~.st-scroll{

transform:translateY(-300%);

-o-transform:translateY(-300%);

-ms-transform:translateY(-300%);

-moz-transform:translateY(-300%);

-webkit-transform:translateY(-300%);

}

#st-control-5:checked~.st-scroll{

transform:translateY(-400%);

-o-transform:translateY(-400%);

-ms-transform:translateY(-400%);

-moz-transform:translateY(-400%);

-webkit-transform:translateY(-400%);

}

.st-desc{

width:200px;

height:200px;

background: #fa96b5;

transform:translateY(-50%) rotate(45deg);

-o-transform:translateY(-50%) rotate(45deg);

-moz-transform:translateY(-50%) rotate(45deg);

-ms-transform:translateY(-50%) rotate(45deg);

-webkit-transform:translateY(-50%) rotate(45deg);

position: absolute;

left: 50%;

top: 0;

margin-left: -100%;

}

写回答关注

6回答

SenbinJiang

2016-01-03 20:47:02

已采纳

你用了transform，但是没有用transition。#st-control-n:checked~.st-scroll{ 这些地方应该使用transition }

0 0
慕标1909118

2016-09-12 21:43:06

外面的transition 里面是transistion 多了s啊

0 0
zeroweb

2016-01-29 16:24:35

锚点的使用不是你这样的吧建议你去看看锚点的使用方法
代码写规范点

0 0
qq_Sunshine_50

2016-01-05 11:55:31

我的代码错误太多了，但是还有其他的主要错误导致没有切换效果。。。。

0 0
SenbinJiang

2016-01-05 11:29:29

在你的代码中有看到“transistion”，不应该是“Transition”吗？

0 0
qq_Sunshine_50

2016-01-05 11:07:06

不对。。。。以下是我往下写的代码，即使有transition也应该有切换的效果，但是没有，您知道怎么解决吗？
.st-scroll,
.st-panel{
width: 100%;
height:100%;
position: relative;
}
.st-scroll{
left: 0;
top: 0;
transform:translate3d(0,0,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);
-webkit-backface-visibility:hidden;
transistion:all 0.6s ease-in-out;
-weibkit-transistion:all 0.6s ease-in-out;
-ms-transistion:all 0.6s ease-in-out;
-moz-transistion:all 0.6s ease-in-out;
-o-transistion:all 0.6s ease-in-out;
}
.st-panel{
background: #fff;
overflow: hidden;
}
#st-control-1:checked~.st-scroll{
transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
-moz-transform:translateY(0%);
-webkit-transform:translateY(0%);
}
#st-control-2:checked~.st-scroll{
transform:translateY(-100%);
-o-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
}
#st-control-3:checked~.st-scroll{
transform:translateY(-200%);
-o-transform:translateY(-200%);
-ms-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-webkit-transform:translateY(-200%);
}
#st-control-4:checked~.st-scroll{
transform:translateY(-300%);
-o-transform:translateY(-300%);
-ms-transform:translateY(-300%);
-moz-transform:translateY(-300%);
-webkit-transform:translateY(-300%);
}
#st-control-5:checked~.st-scroll{
transform:translateY(-400%);
-o-transform:translateY(-400%);
-ms-transform:translateY(-400%);
-moz-transform:translateY(-400%);
-webkit-transform:translateY(-400%);
}
.st-desc{
width:200px;
height:200px;
background: #fa96b5;
transform:translateY(-50%) rotate(45deg);
-o-transform:translateY(-50%) rotate(45deg);
-moz-transform:translateY(-50%) rotate(45deg);
-ms-transform:translateY(-50%) rotate(45deg);
-webkit-transform:translateY(-50%) rotate(45deg);
position: absolute;
left: 50%;
top: 0;
margin-left: -100%;

}

0 0

css3实现网页平滑过渡效果

CSS3 打造页面之间的平滑过渡效果，带来神奇的体验

54371 学习 · 372 问题

相似问题

为什么点击底部导航页面不改变

回答 1

为什么照着写的代码，但是不能进行页面的跳转

回答 2

导航按钮这一步位置颜色都成功了，但是只有中间的两个按钮可以点击，两边的按钮点击鼠标没变，这正常吗？

回答 1

为什么设置了单选按钮透明度，怎么没反应

回答 4

为什么我编的既不能点击其他按钮变色，也生成不了小三角形？代码都是一样的啊？

回答 2

打开慕课网App查看更多内容