Вкладки (табы) на 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>

Демо