<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
overflow: hidden;
}
.nav-container{
position: absolute;
bottom:0px;
}
.nav-container a{
text-decoration: none;
}
.nav{
display: table;
position: relative;
float:left;
float:left;
20%;
height: 30px;
text-align: center;
z-index:2;
}
.nav:hover a{
background-color: gray;
}
.nav a{
display: table-cell;
vertical-align: middle;
100%;
height:100%;
color:white;
background-color: lightgray;
font-size: 20px;
}
.nav input{
display: inline-block;
100%;
height: 28px;
opacity: 0;
position: absolute;
}
input:checked + em {
position: absolute;
left: 50%;
margin-left: -20px;
margin-top: -20px;
1px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid gray;
}
input:checked ~ a {
background-color: gray;
}
.page-container{
position: fixed;
100%;
top:0px;
bottom:0px;
}
.show-container{
position: absolute;
100%;
height:500%;
}
section{
100%;
height:20%;
}
img{
100%;
height:100%;
}
</style>
</head>
<body>
<div class="nav-container">
<div id="nav1" class="nav">
<input id="r1" name="nav" type="radio" checked="checked"/>
<em class="triangle"></em>
<a href="javascript:;">医疗</a>
</div>
<div id="nav2" class="nav">
<input id="r2" name="nav" type="radio" />
<em class="triangle"></em>
<a href="javascript:;">卫生</a>
</div>
<div id="nav3" class="nav">
<input id="r3" name="nav" type="radio" />
<em class="triangle"></em>
<a href="javascript:;">食品</a>
</div>
<div id="nav4" class="nav">
<input id="r4" name="nav" type="radio" />
<em class="triangle"></em>
<a href="javascript:;">旅游</a>
</div>
<div id="nav5" class="nav">
<input id="r5" name="nav" type="radio" />
<em class="triangle"></em>
<a href="javascript:;">教育</a>
</div>
<div class="page-container">
<div class="show-container">
<section id="sec1" class="show-sec">
<img src="images/1.jpg" />
</section>
<section id="sec2" class="show-sec">
<img src="images/2.jpg" />
</section>
<section id="sec3" class="show-sec">
<img src="images/3.jpg" />
</section>
<section id="sec4" class="show-sec">
<img src="images/4.jpg" />
</section>
<section id="sec5" class="show-sec">
<img src="images/5.jpg" />
</section>
</div>
</div>
</div>
<script src="jquery-2.0.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").on("click", function(){
var index = parseInt(this.id[1]);
var viewHeight = $(".page-container").height();
var top = -(index-1)*viewHeight;
$(".show-container").animate({top:top+"px"},800);
});
});
</script>
</body>
</html>