Onglet 2

Un principe pour le petit randonneur...

<div style="position: relative; width: 1000px; height: 563px; margin: 30px auto; text-align: left; border: 1px solid black; overflow: hidden;"><input id="cc1" class="cc" type="text" value="Page 1" /><input id="cc2" class="cc" type="text" value="Page 2" /><input id="cc3" class="cc" type="text" value="Page 3" />
<div id="al">
<div id="lot1">
<p id="ong1" class="ong">aa</p>
<p id="ong1a" class="ong">aa</p>
<p id="ong1b" class="ong">aa</p>
<br />
<p id="ong2" class="ong">bb</p>
<p id="ong2a" class="ong">bb</p>
<p id="ong2b" class="ong">bb</p>
</div>
<div id="lot2">
<p id="ong3" class="ong">cc</p>
<p id="ong4" class="ong">dd</p>
</div>
<div id="lot3">
<p id="ong5" class="ong">ee</p>
<p id="ong6" class="ong">ff</p>
</div>
</div>
</div>
<style><!--
.cc{position:absolute; z-index:5; width: 100px; text-align: center;}
#cc1{transform:translate(0px,0px);}
#cc2{transform:translate(100px,0px);}
#cc3{transform:translate(200px,0px);}
#al{width:1000px; height:1800px; background:pink; text-align:left; transform:translate(0px,-30px); transition:all 1s;}
#lot1{width:1000px; height:563px; text-align:left; background:gold; transform:translate(0px,30px);}
#lot2{width:1000px; height:563px; text-align:left; background:lime; transform:translate(0px,30px);}
#lot3{width:1000px; height:563px; text-align:left; background:beige; transform:translate(0px,30px);}
.ong{float:left; width:200px; height:200px;text-align:center;}
#ong1{float:left; background:yellow; transform:translate(80px,80px);}
#ong1a{float:left; background:yellow; transform:translate(180px,80px);}
#ong1b{float:left; background:yellow; transform:translate(280px,80px);}  
#ong2{float:left; clear:left;background:red; transform:translate(80px,100px);}
#ong2a{float:left; background:red; transform:translate(180px,100px);}
#ong2b{float:left; background:red; transform:translate(280px,100px);}
#ong3{float:left; background:green; transform:translate(80px,80px);}
#ong4{float:left; clear:left;background:blue; transform:translate(80px,100px);}
#ong5{float:left; background:coral; transform:translate(80px,80px);}
#ong6{float:left; clear:left;background:purple; transform:translate(80px,100px);}
#cc1:focus ~ #al{transform:translate(0px,-30px);}
#cc2:focus ~ #al{transform:translate(0px,-593px);}
#cc3:focus ~ #al{transform:translate(0px,-1156px);}
--></style>