[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>
 <script>tabSwap('1')</script> <--처음에 보여줄 녀석

댓글

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

[html] 모바일웹 작업 팁 정리중...

Swiper lazyLoading