IE6, IE7, FF2 Tabs

Content 1

= Source Code =


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Tabs</title>
<!-- Description	: XHTML Tabs style code [ IE6 , IE7 , FF2]	-->
<!-- Author			: blueb(http://blueb.net/blog)						-->
<!-- Date			: 2008-05-08											-->
</head>
<body>
<script type='text/javascript'>
function tabs(idx){
	for(i = 1; i <= 3 ; i++ ){
		document.getElementById('tab'+i).className = "";
		document.getElementById('content'+i).className = "content hide";
	}
	document.getElementById('tab'+idx).className = "active";
	document.getElementById('content'+idx).className = "content show";
}
</script>

<!--[if IE 6]>
<style type='text/css'>
/* IE 6 */
div.tabs-area {
	position:relative;
	z-index:2;
	width:100%;
	height:48px;
	padding:0;margin:0;overflow:hidden;
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:0;
	top:-1px;
	border-top:1px solid #D3D9E6;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type='text/css'>
/* IE 7 */
div.tabs-area {
	position:relative;
	z-index:2;
	height:48px;width:100%;padding:0;margin:0
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:1px;
	top:-2px;
	border-bottom:1px solid #D3D9E6;
}
</style>
<![endif]-->
<!--[if !IE]>-->
<style type='text/css'>
div.tabs-area {
	position:relative;
	z-index:2;
	width:100%;
	height:45px;
	padding:0;margin:0;overflow:hidden;
}

div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:1px;
	top:-1px;
	border-top:1px solid #D3D9E6;
}
</style>
<!--<![endif]-->
<style type='text/css'>

ul.tabs {
	padding:0px;margin:0px;
	z-index:2;
}

ul.tabs li {
	list-style:none;
	display:inline;
	height:50px;
}

ul.tabs li a {
	padding:5px 20px 3px 20px;
	border:1px solid #D3D9E6;
	text-decoration:none;   
	font-size:9pt;
	line-height:30px;
    color:#4B69AF; 
    background:#E9ECF2;
}

ul.tabs li a:hover {   
    background:#E8FFFF;
}

ul.tabs li a.active {   
    background:#fff;
    color:#4B69AF;   
    border:1px solid #D3D9E6;    
    border-bottom: 1px solid #ffffff;   
	padding:10px 20px 3px 20px;
	font-weight:bold;
	line-height:70px;
}

div.content {
	/* 컨텐츠 영역 박스 스타일 지정 하는곳 */
}
div.show		{ display:block;}
div.hide		{ display:none; }

</style>
<h3>IE6, IE7, FF2 Tabs</h3>
<div>
	<div class='tabs-area'>
		<ul class='tabs'>
		<li> </li>
		<li><a id='tab1' title="Tab1 Desc" href="javascript:tabs('1');" class='active'>Tab 1</a></li>
		<li><a id='tab2' title="Tab2 Desc" href="javascript:tabs('2');">Tab 2</a></li>
		<li><a id='tab3' title="Tab3 Desc" href="javascript:tabs('3');">Tab 3</a></li>
		</ul>
	</div>
	<div class='tabs-line'></div>
</div>


<div id='content1' class='content show'>
	<h1>Content 1</h1>
</div>
<div id='content2' class='content hide'>
	<h1>Content 2</h1>
</div>
<div id='content3' class='content hide'>
	<h1>Content 3</h1>
</div>


</body>
</html>