HTML: 탭토글 (Tab Toggle) 스크립트 - 메뉴, 안내문 등

간단한 탭토글의 예이다. 스타일(style)의 속성을 잘 어울리도록 조절하면 되고, 메뉴는 필요한 만큼 추가하거나 삭제 하면 된다.

[탭토글 실제 적용 예]

• 0번메뉴
• 1번 메뉴
• 2번 메뉴
• 3번 메뉴

0번 내용란

1번 내용란 1번 내용란

2번 내용란 2번 내용란 2번 내용란

3번 내용란 3번 내용란 3번 내용란 3번 내용란

[코드 모양 : 위의 예와 같이 되도록설정한 코드]

<style type="text/css">
.menu_tab{width:100%; overflow:hidden;  border-bottom:2px solid gold; padding:0px; margin:0px;}
.menu_tab ul{padding:0px; margin:0px;}
.menu_tab li{list-style:none; position:relative; float:left; padding-right:15px;}
.menu_tab li a{display:block;padding:3px 7px 3px 7px;text-decoration:none; text-align:center;}
.menu_tab li a:hover{text-decoration:none}
.menu_tab li.active a{background:gold; font-weight:bold; color:#333;}
.menu_tab li.active a:hover{text-decoration:none}
#panels {margin:10px 20px 10px 0px; font-size:1.2em; line-height:1.5em; }
</style>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
function tab_menu(num){
 var f = $('.menu_tab').find('li');
 for ( var i = 0; i < f.length; i++ ) {
  if ( i == num) {
   f.eq(i).addClass('active');
   $('.menu_tab0' + i ).show();
  } else {
   f.eq(i).removeClass('active');  
   $('.menu_tab0' + i ).hide();
  }
 }
}
</script>

<div class="menu_tab">
<ul>
<li class="fst active"><a href="#;" onclick="tab_menu(0);">0번메뉴</a></li>
<li><a href="#;" onclick="tab_menu(1);">1번 메뉴</a></li>
<li><a href="#;" onclick="tab_menu(2);">2번 메뉴</a></li>
<li><a href="#;" onclick="tab_menu(3);">3번 메뉴</a></li>
</ul>
</div>
<div class="menu_tab00 mTs" id="panels">
0번 내용란
</div>
<div class="menu_tab01 mTs" id="panels" style="display: none;">
1번 내용란
</div>
<div class="menu_tab02 mTs" id="panels" style="display: none;">
2번 내용란
</div>
<div class="menu_tab03 mTs" id="panels" style="display: none;">
3번 내용란
</div>