css3-tabs

<style>
		*{margin: 0;padding:0;}
			body {margin: 0;padding: 20px 50px;}
			/*CSS Tabs style*/
			#cssTabs{
				position: relative;
				width: 600px;
				height: 290px;
				margin: 0 auto;
			}
			.tabHead{
				font-weight: normal;
				/*padding: 5px;*/
				width: 150px;
				height: 38px;
				line-height: 38px;
				text-align: center;
				border: 1px solid #000;
				border-width: 1px 1px 0;
				-moz-border-radius: 5px 5px 0 0;
				-webkit-border-radius: 5px 5px 0 0;
				border-radius: 5px 5px 0 0;
				position: absolute;
				top: 0;
				left: 0;
				background: #fff;
				cursor: pointer;
			}
			.tabContent{
				padding: 10px 20px;
				background: #fff;
				border: 1px solid #000;
				position: absolute;
				top: 38px;
				left: 0;
				width: 100%;
				height: 230px;
			}
			#tab1 .tabHead{
				z-index: 3;
			}
			#tab2 .tabHead{
				z-index: 1;
				left: 155px;
			}
			#tab3 .tabHead{
				z-index: 1;
				left: 310px;
			}
			#tab1 .tabContent{
				z-index: 2;
			}
			#tab1:hover h3,
			#tab1:focus h3,
			#tab1:active h3,
			#tab2:hover h3,
			#tab2:focus h3,
			#tab2:active h3,
			#tab3:hover h3,
			#tab3:focus h3,
			#tab3:active h3 {
				z-index: 4;
				font-weight: bold;
			}
			#tab1:hover .tabContent,
			#tab1:focus .tabContent,
			#tab1:active .tabContent,
			#tab2:hover .tabContent,
			#tab2:focus .tabContent,
			#tab2:active .tabContent,
			#tab3:hover .tabContent,
			#tab3:focus .tabContent,
			#tab3:active .tabContent {            
				 z-index: 3;
			}
			/*首先要将"hover"状态下的选项卡主内容都比前面的默认“z-index”值大，而同时必须保证各选项卡的标题在“z-index”的值大*/
			.tabContent {
				opacity: 0;
				filter: alpha(opacity=0); 
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
				-webkit-transition : opacity 0.5s ease-in 0.218s;
				-moz-transition : opacity 0.5s ease-in 0.218s;
				-o-transition : opacity 0.5s ease-in 0.218s;
				-ms-transition : opacity 0.5s ease-in 0.218s;
				transition : opacity 0.5s ease-in 0.218s;
			}
			#tab1 .tabContent {
				opacity: 1;
				filter: alpha(opacity=100); 
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
			}
			#tab1:hover .tabContent,
			#tab1:focus .tabContent,
			#tab1:active .tabContent,
			#tab2:hover .tabContent,
			#tab2:focus .tabContent,
			#tab2:active .tabContent,
			#tab3:hover .tabContent,
			#tab3:focus .tabContent,
			#tab3:active .tabContent {            
				opacity: 1;
				filter: alpha(opacity=100);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			}
		</style>

<div id="cssTabs" >
			<div id="tab1" class="uiTab">
				<h3 class="tabHead">Header for Tab1</h3>
				<div class="tabContent">Content for Tab1</div>
			</div>
			<div id="tab2" class="uiTab">
				<h3 class="tabHead">Header for Tab2</h3>
				<div class="tabContent">Content for Tab2</div>
			</div>
			<div id="tab3" class="uiTab">
				<h3 class="tabHead">Header for Tab3</h3>
				<div class="tabContent">Content for Tab3</div>
			</div>
		</div>