Tab :: Out  <div class="modTab out">  <ul class="tabMenu"> <li class="item"><a href="#">메뉴1</a></li> <li class="item on"><a href="#">메뉴2</a></li> <li class="item"><a href="#">메뉴3</a></li> <li class="item"><a href="#">메뉴4</a></li> <li class="item"><a href="#">메뉴5</a></li> </ul>  <script> $(document).ready(function(){ //탭메뉴 스크립트 $(".modTab li.item a").on("click",function(e){ if($(this).parents(".modTab").hasClass("in")){ e.preventDefault(); let _idx = $(this).parent().index(); $(this).parents(".tabMenu").find(".item").eq(_idx).addClass("on").siblings().removeClass("on"); $(this).parents(".modTab").find(".tabCont").eq(_idx).addClass("on").siblings().removeClass("on"); } }); }); </script> </div> Tab :: In  <div class="modTab in">  <ul class="tabMenu"> <li class="item"><a href="#">메뉴1</a></li> <li class="item on"><a href="#">메뉴2</a></li> <li class="item"><a href="#">메뉴3</a></li> <li class="item"><a href="#">메뉴4</a></li> </ul>  <div class="tabContGroup"> <div class="tabCont on">탭 내 컨텐츠 영역 1</div> <div class="tabCont">탭 내 컨텐츠 영역 2</div> <div class="tabCont">탭 내 컨텐츠 영역 3</div> </div> <script> $(document).ready(function(){ //탭메뉴 스크립트 $(".modTab li.item a").on("click",function(e){ if($(this).parents(".modTab").hasClass("in")){ e.preventDefault(); let _idx = $(this).parent().index(); $(this).parents(".tabMenu").find(".item").eq(_idx).addClass("on").siblings().removeClass("on"); $(this).parents(".modTab").find(".tabCont").eq(_idx).addClass("on").siblings().removeClass("on"); } }); }); </script> </div>

설명

.tabMenu 내에 li.item 갯수에 따라 메뉴 수가 결정되고 자동으로 가로 길이가 조절된다.

추가 조작


경로	.modTab.className
className	설명
out	메뉴 클릭 시 화면 전환이 일어남 (링크)
in	메뉴 클릭 시 화면 내에서 컨텐츠가 바뀜
경로	.modTab .tabMenu .item.className
className	설명
on	해당 메뉴 선택 된 효과
경로	.modTab .tabContGroup .tabCont.className
className	설명
on	해당 컨텐츠가 보임 (display:block)