괜시리 오후에 일하기도 그렇고...해서 한번 만들어 봤다.
웹을 하다보면 많이 쓰는 태그중 하나가 div가 아닐까 싶다.
div를 이용해서 간단하게 tab 기능을 만들어 봤다.
가장 간단하게 소스를 만들다 보니 꾸미는 것은 배제했다.
머 이정도는 누구라도 쉽게 이해하고 응용할 수 있으리라 믿어 의심치 않는다.
<html>
<head>
<title>Div를 이용한 tab</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script type='text/javascript'>
function changeToDiv01Tab()
{
document.getElementById("div01").style.display = "inline";
document.getElementById("div02").style.display = "none";
document.getElementById("div03").style.display = "none";
}
function changeToDiv02Tab()
{
document.getElementById("div01").style.display = "none";
document.getElementById("div02").style.display = "inline";
document.getElementById("div03").style.display = "none";
}
function changeToDiv03Tab()
{
document.getElementById("div01").style.display = "none";
document.getElementById("div02").style.display = "none";
document.getElementById("div03").style.display = "inline";;
}
</script>
</head>
<body>
<table>
<tr>
<td>DIV를 이용한 TAB관련 예제입니다.</td>
</tr>
</table>
<div style="margin:15 0 25 20">
<table width=400>
<tr>
<td>TTS 키워드 변경 안내</td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
</table>
<div id="div01">
<table>
<tr>
<td><a href="javascript:changeToDiv01Tab()">Tab1</a> <a href="javascript:changeToDiv02Tab()">Tab2</a> <a href="javascript:changeToDiv03Tab()">Tab3</a></td>
</tr>
</table>
<table>
<tr>
<td>
Tab1에 들어갈 내용이 들어옵니다.
</td>
</tr>
</table>
</div>
<div id="div02" style="display:none">
<table>
<tr>
<td><a href="javascript:changeToDiv01Tab()">Tab1</a> <a href="javascript:changeToDiv02Tab()">Tab2</a> <a href="javascript:changeToDiv03Tab()">Tab3</a></td>
</tr>
</table>
<table>
<tr>
<td>
Tab2에 들어갈 내용이 들어옵니다.
</td>
</tr>
</table>
</div>
<div id="div03" style="display:none">
<table>
<tr>
<td><a href="javascript:changeToDiv01Tab()">Tab1</a> <a href="javascript:changeToDiv02Tab()">Tab2</a> <a href="javascript:changeToDiv03Tab()">Tab3</a></td>
</tr>
</table>
<table>
<tr>
<td>
Tab3에 들어갈 내용이 들어옵니다.
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
