Информативные вкладки

<style>
#tab1, #tab2, #tab3 {
display:none;
position:fixed;
}
.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1) {
background: #fff;
padding: 5px;
border: 1px solid #e1e1e1;
line-height: 28px; }
.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3) {
border-bottom: #fff;
}
.menu1 > a:hover {
text-decoration: none;
}
.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1) {
display: none;
padding: 5px;
border: 1px solid #e1e1e1;
border-top: #fff;
background: #fff;
}
.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3) {
display: block;
}
</style>
<div class="menu1">
<br id="tab2"/><br id="tab3"/>
<a href="#tab1">Заголовок вкладки1</a>
<a href="#tab2">Заголовок вкладки2</a>
<a href="#tab3">Заголовок вкладки3</a>
<div>вклака 1</div>
<div>вклака 2</div>
<div>вклака 3</div></div>