tabs

by vi161

HTML

<body>
	<div class="tabs">
		
		<div class="tab" id="tab1">
			<a class="tab-item" href="#tab1">Tab 1</a>
			<div class="tab-content">
				Content of Tab1
			</div>
		</div>
		
		<div class="tab" id="tab2">
			<a class="tab-item" href="#tab2">Tab 2</a>
			<div class="tab-content">
				Content of Tab2
			</div>
		</div>
		
		<div class="tab" id="tab3">
			<a class="tab-item" href="#tab3">Tab 3</a>
			<div class="tab-content">
				Content of Tab3
			</div>
		</div>

	
	</div>
</body>

CSS

.tabs
{
	position: relative;
    clear: both;
}
.tabs .tab
{
	float: left;
	margin-right: 10px;
}
.tab-content
{
	position: absolute;
	background-color: white;
	width: 100%;
  height: 200px;
	left: 0px;
  border: 1px solid;
}
.tabs .tab:nth-of-type(1) .tab-content
{
	z-index: 1;
}
.tab:target a
{
	font-weight: bold;
}
.tab:target .tab-content
{
	z-index: 1;
}