纯CSS3实现选项卡

HTML

<div class="box">
	<div id="content1">
		<a class="title" href="#content2">标题1</a>
		<div class="content">
			内容1
		</div>
	</div>
	<div id="content2">
		<a class="title" href="#content2">标题2</a>
		<div class="content">
			内容2
		</div>
	</div>
	<div id="content3">
		<a class="title" href="#content3">标题3</a>
		<div class="content">
			内容3
		</div>
	</div>
	<div id="content4">
		<a class="title" href="#content4">标题4</a>
		<div class="content">
			内容4
		</div>
	</div>
</div>

CSS

*{
    margin:0;
    padding:0;
}
a{
    text-decoration:none;
}
a:hover{
    text-decoration:none;
}

.box{
    width:400px;
    height:100px;
    margin-top:50px;
    position:relative;
    border:1px solid #ccc;
}

.title{
    width:100px;
    height:50px;
    position:absolute;
    display:inline-block;
    top:-50px;
    font-size:16px;
    line-height:50px;
    text-align:center;
    background-color:#eee;
}

.box>div:nth-child(1)>a{
    left:0;
}
.box>div:nth-child(2)>a{
    left:100px;
}
.box>div:nth-child(3)>a{
    left:200px;
}
.box>div:nth-child(4)>a{
    left:300px;
}

.content{
    display:none;
    width:100%;
    height:100%;
}

.box>div:target>.title{
    background-color:#ccc;
}
.box>div:target>.content{
    display:block;
}