[JS] Tab
<script type="text/javascript">
function tabSwap(sw) {
for (i = 1; i < 4; i++) {
if (sw == i) {
document.getElementById('tab01_0'+i).style.display='';
} else {
document.getElementById('tab01_0'+i).style.display='none';
}
}
}
</script>
<div id="tab01_01" style="display:none"'>
<ul>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('1')" onfocus="this.blur()">1</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('2')" onfocus="this.blur()">2</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('3')" onfocus="this.blur()">3</a></li>
</ul>
<div style="border:1px solid #000;width:300px;height:300px;clear:both;">1번 탭</div>
</div>
<div id="tab01_02" style="display:none"'>
<ul>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('1')" onfocus="this.blur()">1</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('2')" onfocus="this.blur()">2</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('3')" onfocus="this.blur()">3</a></li>
</ul>
<div style="border:1px solid #000;width:300px;height:300px;clear:both;">2번 탭</div>
</div>
<div id="tab01_03" style="display:none"'>
<ul>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('1')" onfocus="this.blur()">1</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('2')" onfocus="this.blur()">2</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('3')" onfocus="this.blur()">3</a></li>
</ul>
<div style="border:1px solid #000;width:300px;height:300px;clear:both;">3번 탭</div>
</div>
function tabSwap(sw) {
for (i = 1; i < 4; i++) {
if (sw == i) {
document.getElementById('tab01_0'+i).style.display='';
} else {
document.getElementById('tab01_0'+i).style.display='none';
}
}
}
</script>
<div id="tab01_01" style="display:none"'>
<ul>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('1')" onfocus="this.blur()">1</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('2')" onfocus="this.blur()">2</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('3')" onfocus="this.blur()">3</a></li>
</ul>
<div style="border:1px solid #000;width:300px;height:300px;clear:both;">1번 탭</div>
</div>
<div id="tab01_02" style="display:none"'>
<ul>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('1')" onfocus="this.blur()">1</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('2')" onfocus="this.blur()">2</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('3')" onfocus="this.blur()">3</a></li>
</ul>
<div style="border:1px solid #000;width:300px;height:300px;clear:both;">2번 탭</div>
</div>
<div id="tab01_03" style="display:none"'>
<ul>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('1')" onfocus="this.blur()">1</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('2')" onfocus="this.blur()">2</a></li>
<li style="float:left;width:100px;"><a href="javascript:tabSwap('3')" onfocus="this.blur()">3</a></li>
</ul>
<div style="border:1px solid #000;width:300px;height:300px;clear:both;">3번 탭</div>
</div>
<script>tabSwap('1')</script> <--처음에 보여줄 녀석
댓글
댓글 쓰기