<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width = device-width,initial-scale=1" />
<title></title>
<style type="text/css">
html,
body,
#big_box
{
width: 100%;
height: 100%;
font-size: 14px;
margin: 0;
padding: 0;
overflow: hidden;
}
h2 {
margin: 0;
padding: 0;
height: 100px;
font-size: 25px;
line-height: 100px;
}
#container{
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
#container > input,#container > a{
position: fixed;
bottom: 0;
width: 20%;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 15px;
color: white;
background-color: red;
cursor: pointer;
}
#container > input{
z-index: 1000;
opacity: 0;
}
#container > a{
z-index: 10;
text-decoration: none;
}
#container > input:hover + a{
background-color: greenyellow;
}
#container > input:checked + a,#container > input:checked:hover + a{
background-color: yellow;
}
#container > input:checked + a:after{
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border: 40px solid transparent;
border-bottom-color:yellow ;
}
#controlPage1,#controlPage1 + a{
left: 0;
}
#controlPage2,#controlPage2 + a{
left: 20%;
}
#controlPage3,#controlPage3 + a{
left: 40%;
}
#controlPage4,#controlPage4 + a{
left: 60%;
}
#controlPage5,#controlPage5 + a{
left: 80%;
}
#scroll{
left: 0;
top: 0;
width: 100%;
height: 100%;
/*transform: translate3d(0,0,0);*/
-webkit-backface-visibility: hidden;
transition: all 1s ease-in-out;
}
.sects{
width: 100%;
height: 100%;
text-align: center;
background: #fff;
overflow: hidden;
}
#controlPage1:checked ~ #scroll{
transform: translateY(0%);
}
#controlPage2:checked ~ #scroll{
-webkit-transform: translateY(-100%);
}
#controlPage3:checked ~ #scroll{
-webkit-transform: translateY(-200%);
}
#controlPage4:checked ~ #scroll{
-webkit-transform: translateY(-300%);
}
#controlPage5:checked ~ #scroll{
-webkit-transform: translateY(-400%);
}
#controlPage1:checked ~ #scroll #controlDetailPage1 h2{
animation: downAndUp 1s ease-in-out forwards;
}
#controlPage1:checked ~ #scroll #controlDetailPage1 p{
animation: sUp 1s ease-in-out forwards;
}
#controlPage2:checked ~ #scroll #controlDetailPage2 h2{
animation: downAndUp 1s ease-in-out forwards;
}
#controlPage2:checked ~ #scroll #controlDetailPage2 p{
animation: sUp 1s ease-in-out forwards;
}
#controlPage3:checked ~ #scroll #controlDetailPage3 h2{
animation: downAndUp 1s ease-in-out forwards;
}
#controlPage3:checked ~ #scroll #controlDetailPage3 p{
animation: sUp 1s ease-in-out forwards;
}
#controlPage4:checked ~ #scroll #controlDetailPage4 h2{
animation: downAndUp 1s ease-in-out forwards;
}
#controlPage4:checked ~ #scroll #controlDetailPage4 p{
animation: sUp 1s ease-in-out forwards;
}
#controlPage5:checked ~ #scroll #controlDetailPage5 h2{
animation: downAndUp 1s ease-in-out forwards;
}
#controlPage5:checked ~ #scroll #controlDetailPage5 p{
animation: sUp 1s ease-in-out forwards;
}
@keyframes downAndUp{
from{
opacity: 0;
transform: translate3d(0,-10px,0);
}
to{
opacity: 1;
transform: translate3d(0,0,0);
}
}
@keyframes sUp{
from{
opacity: 0;
transform: translate3d(0,0,0);
}
to{
opacity: 1;
transform: translate3d(0,10px,0);
}
}
</style>
</head>
<body>
<div id="big_box">
<div id="container">
<input type="radio" name="navControl" checked="checked" id="controlPage1" />
<a href="#controlDetailPage1">page1</a>
<input type="radio" name="navControl" id="controlPage2" />
<a href="#controlDetailPage2">page2</a>
<input type="radio" name="navControl" id="controlPage3" />
<a href="#controlDetailPage3">page3</a>
<input type="radio" name="navControl" id="controlPage4" />
<a href="#controlDetailPage4">page4</a>
<input type="radio" name="navControl" id="controlPage5" />
<a href="#controlDetailPage5">page5</a>
<div id="scroll">
<section id="controlDetailPage1" class="sects">
<div class="heads" data-text='A'></div>
<h2>page1</h2>
<p class="detailText">
page1内容
</p>
<img src="img/1.jpg"/>
</section>
<section id="controlDetailPage2" class="sects">
<div class="heads" data-text='B'></div>
<h2>page2</h2>
<p class="detailText">
page2内容
</p>
<img src="img/2.jpg"/>
</section>
<section id="controlDetailPage3" class="sects">
<div class="heads" data-text='C'></div>
<h2>page3</h2>
<p class="detailText">
page3内容
</p>
<img src="img/3.jpg"/>
</section>
<section id="controlDetailPage4" class="sects">
<div class="heads" data-text='D'></div>
<h2>page4</h2>
<p class="detailText">
page4内容
</p>
<img src="img/4.jpg"/>
</section>
<section id="controlDetailPage5" class="sects">
<div class="heads" data-text='E'></div>
<h2>page5</h2>
<p class="detailText">
page5内容
</p>
<img src="img/5.jpg"/>
</section>
</div>
</div>
</div>
</body>
</html>
这个例子主要是借助了css 3中相邻兄弟选择器(+)以及后同辈选择器(~)同时借助radio单选框的checked来确定点击的是哪个nav从而改变该nav下的样式,达到js选择的相同效果 但是总体还是没有js控制得那么细