<!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>
'개발 세발 창고' 카테고리의 다른 글
| Powerpoint에서 PPT 자동 진행 하기 (0) | 2010.02.02 |
|---|---|
| 오른쪽 마우스 버튼 클릭 금지, 드래그 금지, 선택 금지 Script (0) | 2010.01.26 |
| HTML COLOR CODE TABLE (0) | 2009.10.15 |
| java.sql.SQLException: Io exception: Connection reset (0) | 2009.10.14 |
| Connection : org.apache.tomcat.dbcp.dbcp.SQLNestedException: Cannot create PoolableConnectionFactory (IO 예외 상황: The Network Adapter could not establish the connection) (0) | 2009.09.25 |