Вкладки (табы) на CSS очень просты, но и область их применения не широка, а всё из-за ссылок якорей. Смотрите сами в примере.
1. CSS
* {
margin: 0;
padding: 0
}
#content .tabs {
font-family: Georgia;
font-size: 12px;
line-height: 30px;
list-style: none;
overflow: hidden;
height: 30px;
}
#content .tabs a {
float: left;
background: #eee;
padding: 0 15px;
text-decoration: none;
height: 30px;
}
#content .tabs a:hover {
background: #ddd;
}
#content .tabs-content {
width: 960px;
height: 300px;
overflow: hidden;
}
#content .tabs-content ul {
list-style: none;
text-align: center;
line-height: 300px;
font-size: 150px;
}
#content .tabs-content ul li {
width: 960px;
height: 300px
}
#content .tabs-content ul #one {
background: #b0a200;
}
#content .tabs-content ul #two {
background: #00aab0;
}
#content .tabs-content ul #three {
background: #b00095;
}
#content .tabs-content ul #four {
background: #78b000;
}
#content .tabs-content ul #five {
background: #b03200;
}
2. HTML
<div id="content">
<ul class="tabs">
<li><a href="#one">1</a></li>
<li><a href="#two">2</a></li>
<li><a href="#three">3</a></li>
<li><a href="#four">4</a></li>
<li><a href="#five">5</a></li>
</ul>
<div class="tabs-content">
<ul>
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
<li id="four">4</li>
<li id="five">5</li>
</ul>
</div>
</div>