点击按钮为什么页面没有跳转呢？是什么地方错误了？
我是严格按照视频写的代码，可是点击导航按钮页面为什么不能跳转呢？求各位大神指点。
<!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%;
}
