example tabs

<style type="text/css">
#profile
{background-image:url(http://subtlepatterns.com/patterns/lined_paper.png);background-position:center; background-repeat:repeat; border-width:0px; cursor:crosshair;}

::-webkit-scrollbar { width:2px; -moz-border-radius:880px;
border-radius:80px; }
::-webkit-scrollbar-track { border-radius: 880px;
background-color:#bb1188; }
::-webkit-scrollbar-thumb { border-radius:880px;
background-color:#000000;}

.pfor {display: none; }

body
{background-image:url(http://subtlepatterns.com/patterns/lined_paper.png);background-position:center; background-repeat:repeat; cursor:crosshair;}

#picture
{background-image:url(http://www.limepic.com/img/JTeV.jpg); background-position:right;  background-repeat:no-repeat; position:absolute; height:600px; width:411px; right:100px; top:5px; -moz-border-radius: 0em 4em 4em 0em;
border-radius: 0em 4em 4em 0em; }

#page {background-color:transparent; position:fixed; padding:4px; letter-spacing:2px; line-height:9px; top:5px; height:592px; width:350px; left:154px;  font-family:serif; font-size:7pt; font-color:#555555; border-left: 2px solid #000;  -moz-border-radius: 4em 4em 4em 4em; border-radius: 4em 4em 4em 4em; overflow-x:hidden; overflow-y:auto;}

#yi { background-color:transparent; color:#555555; font-family:serif; font-size:8pt; height:570px; width:350px; position:fixed; left:164px;}

#visible{width: 350px; height: 570px; overflow:auto; line-height:8px; letter-spacing:1px; text-align:left; font-size:7pt; overflow-x:hidden; overflow-y:auto;}
#hidden{width: 350px; height: 570px; overflow:hidden; }

a:hover
{opacity:0.6; color:#fff; background-color:transparent; text-decoration:none; }

a:link, a:visited
{color:#000; background-color:transparent; text-decoration:none; -moz-border-left:1px; -moz-border-right:1px; border-color:#554433;}

i {font-family:Bell MT; font-size: 8pt; color:573C56;}

b {color:#333333; font-size: 7pt; font-family:Bell MT; }

h1
{background-color:transparent; color:#776677; font-size: 10pt; font-family:times new roman, serif; text-align:right; width:350px; height:12px;  line-height:14px; letter-spacing:2px;}
</style>

<div id="picture">
</div>

<div id="page">
<div id="button">
<a class="button" href="#one">一</a>
<a class="button" href="#two">二</a>
<a class="button" href="#three">三</a>
<a class="button" href="#four">四</a>
<a class="button" href="#five">五</a>
<a class="button" href="#six">六</a>

<div id="yi">
<div id="hidden">

<div id="visible">
<a name="one"></a>
<br>
<br>
<h1>beginning</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio lectus, pulvinar eu pretium at, iaculis eu leo.<i> Fusce varius vestibulum imperdiet. Maecenas auctor, felis vestibulum elementum molestie, libero nisi malesuada ligula, eu scelerisque est lorem vestibulum lorem.</i> Nam sed nibh ultrices mi sagittis iaculis eget non lectus. Nam eu ultricies sem. Praesent urna diam, ornare et feugiat ut, malesuada in felis. Quisque congue dui ut urna dapibus eleifend. Etiam a risus quis tellus cursus rhoncus. Praesent gravida dolor at augue varius id eleifend massa ultricies. Curabitur ac enim odio. Sed condimentum tortor dolor. Nam mollis dui vitae augue semper ultricies. Integer quis orci sit amet risus iaculis pellentesque id condimentum neque.</p>

<p>Proin lacinia viverra rutrum. Quisque odio arcu, rutrum id vehicula at, pulvinar nec nibh. Donec cursus suscipit ultrices. Aliquam at nulla nibh, vel bibendum mi. Duis pulvinar ultrices ultricies. Vestibulum nulla metus, <b>ornare nec mattis id, iaculis vel velit. Suspendisse potenti.</b> Vivamus adipiscing metus magna, non pharetra tortor. Phasellus at dui mauris, sit amet imperdiet libero. Etiam tortor tortor, egestas ut vulputate nec, auctor nec neque. Donec vehicula mi nec nulla dignissim sodales. Morbi at tortor quis nibh convallis scelerisque et at sem. Nullam ipsum turpis, pellentesque lobortis porttitor vitae, euismod id erat. Nulla semper iaculis dolor sed porttitor.</p>

<p>Mauris ante magna, pretium eu eleifend ut, euismod eu velit. Mauris quam elit, luctus sit amet lacinia et, porttitor vitae mauris. <a href="">Nam consequat pretium tortor non tempus. Nulla facilisi.</a> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer magna mi, tempus ac malesuada sed, dapibus porttitor justo. Praesent dapibus augue vel nisi mollis convallis. Donec sodales posuere mauris vitae tincidunt. Phasellus viverra leo ac orci elementum ac lacinia justo sollicitudin. Praesent varius bibendum dui, eget sagittis orci interdum sit amet. Sed mattis nisi sed orci dignissim tristique. Sed erat metus, aliquam non iaculis sed, interdum sed turpis.</p>

<p>Fusce venenatis imperdiet placerat. Aliquam est felis, vulputate eu interdum sed, luctus eget felis. Praesent pulvinar ipsum eget felis sollicitudin cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse arcu nisi, congue id posuere et, luctus id urna. Duis tempus sollicitudin tristique. Sed sed lectus vitae sem eleifend laoreet eu congue sem.</p>

<p>Integer varius, mauris at volutpat aliquam, sapien est pulvinar diam, nec sodales urna dolor quis odio. Duis faucibus, mauris id vulputate gravida, lorem velit interdum nunc, eget pulvinar arcu metus ut velit. Aenean sapien justo, vestibulum non sagittis quis, consequat id orci. Aliquam erat volutpat. Nam vel libero dolor. Suspendisse pellentesque tempus elit, vel sagittis ipsum malesuada id. Curabitur ultricies euismod mattis.</p>

<p>Aenean laoreet, metus sed sollicitudin tincidunt, leo nisi laoreet sapien, sed venenatis leo lacus in nisi. Quisque convallis nisi et turpis faucibus ornare. Nulla facilisi. Vestibulum eu augue et diam interdum mollis quis eu arcu. Integer velit metus, viverra sit amet malesuada eget, scelerisque ac orci. Nullam dolor metus, auctor eget auctor at, faucibus nec ante. Vestibulum faucibus eros sollicitudin nulla lacinia lobortis. Donec sit amet dolor id nulla fermentum pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus auctor eros, ut varius lectus tristique ut. In hac habitasse platea dictumst. Phasellus sit amet quam non tellus porta iaculis.

Sed nisl magna, dictum non laoreet ut, mollis et quam. Nunc id lacus velit. Nulla nisi urna, pellentesque sed laoreet at, tempor non est. Nunc consectetur, dolor sit amet eleifend viverra, eros libero ultrices lectus, nec suscipit dolor ipsum in urna. Donec venenatis pellentesque lorem, ut lobortis nibh convallis id. Fusce venenatis congue tempor. In mollis velit id tortor molestie id scelerisque eros consectetur. In at nulla felis, ut imperdiet augue.</p>

<p>Sed congue suscipit iaculis. Pellentesque lobortis eros nec turpis scelerisque aliquet. Aliquam cursus elit non sapien lobortis lacinia. Etiam luctus pellentesque justo, non condimentum tellus blandit eu. Mauris viverra elit vitae turpis pharetra porta. Pellentesque feugiat velit in mauris consequat viverra. Aliquam ultrices vulputate purus quis egestas. Nunc eget dui ut lacus vestibulum consequat.</p>

<p>Aliquam quam lectus, ultrices ut lacinia a, scelerisque eget sem. Nunc sed augue eget arcu sodales varius. Nam molestie ultricies mi, at mattis urna hendrerit at. Praesent pretium feugiat mauris ac porta. Aliquam consequat placerat nibh. Curabitur ac laoreet libero. Morbi condimentum, nisi quis vestibulum fringilla, diam ipsum porttitor urna, sed fermentum neque enim vitae purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum et convallis lectus. Donec risus purus, semper ut facilisis nec, dictum eget diam.</p>

</div>


<div id="visible">
<a name="two"></a>
text
</div>

<div id="visible">
<a name="three"></a>
text
</div>

<div id="visible">
<a name="four"></a>
text
</div>

<div id="visible">
<a name="five"></a>
text
</div>

<div id="visible">
<a name="six"></a>
text
</div>


</div>
</div>