[jquery/css] 간단한 탭메뉴 만들기 tab menu

jquery 와 css 을 이용한 간단한 탭메뉴 만들기 head 부분에 jquery 호출 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>tab 메뉴를 구현할 box 만들기 box는 가로 200px 세로길이는 컨텐츠에 따라 자동으로 늘어나는 auto height로 구성height:auto;overflow:hidden; .tab{ width:200px; height:auto; overflow:hidden; }<div class="tab"></div>클릭하여 동작할 tab 부분 css 작업 tab을 3개 넣을거라 33.3333% 로 작업 / 같은 크기의 3개의 탭높이는 텍스트의 line-height 로 잡음 (40px)tab을 클릭해야 함으로 cursor:pointer 로 마우스 커스를 올렸을때 손가락 모양이 나오게 함그리고 tab이 선택된 것을 표시하기 위해 .on 클래스로 표기함 마우스 오버와 선택된 것을 동일하게 적용하기 위해 .tab ul li:hover,.tab ul li.on{ /*css*/ }위와같이 구현함 .tab{ width:200px; height:auto; overflow:hidden; } .tab ul{ padding:0; margin:0; list-style:none; width:100%: height:auto; overflow:hidden; } .tab ul li{ display:inline-block; width:33.3333%; float:left; line-height:40px; text-align:center; cursor:pointer; } .tab ul li:hover, .tab ul li.on{ background:#ccc; }<div class="tab"> <ul> <li class="on">tab #1</li> <li>tab #2</li> <li>tab #3</li> </ul></div>tab 선택에 따라 보여줄 content box 작업content box는 선택된 것만 보여줄 것이므로 기본적으로 display:none 으로 처리 선택된 것을 표시하기 위해 .on 클래스를 추가하여 display:block 속성을 줌 .tab{ width:200px; height:auto; overflow:hidden; } .tab ul{ padding:0; margin:0; list-style:none; width:100%: height:auto; overflow:hidden; } .tab ul li{ display:inline-block; width:33.3333%; float:left; line-height:40px; text-align:center; cursor:pointer; } .tab ul li:hover, .tab ul li.on{ background:#ccc; } .tab .conBox{ width:100%; height:auto; overflow:hidden; min-height:200px; background:#ccc; display:none; text-align:center; } .tab .conBox.on{ display:block; }<div class="tab"> <ul> <li class="on">tab #1</li> <li>tab #2</li> <li>tab #3</li> </ul> <div id="con1" class="conBox on"> cont1 </div> <div id="con2" class="conBox"> cont2 </div> <div id="con3" class="conBox"> cont3 </div></div>이렇게 되면 기본적인 틀을 되었음 이제 jquery 작업 시작 <script> $(function(){ // tab 메뉴를 클릭하였을 때 동작함 $(".tab ul li").click(function(){  // 현재 선택되어있던 메뉴들을 초기화함 $(".tab ul li").removeClass('on'); $(".tab .conBox").removeClass('on'); // 선택된 메뉴에 on 클래스를 주어 표기함 $(this).addClass('on'); // 선택된 탭의 data 값으로 content box를 선택함 $("#"+$(this).data('id')).addClass('on'); }); });</script>선택된 li 에 대한 index 값으로도 content box의 id 를 호출 할 수 있고, 그외 다른 방법들로도 구현은 가능하나, 이번에는 data 값을 주어 그 값으로 호출함간단하게 jquery와 css를 이용하여 탭메뉴 만들기 끝 완성코드 CSS .tab{ width:200px; height:auto; overflow:hidden; } .tab ul{ padding:0; margin:0; list-style:none; width:100%: height:auto; overflow:hidden; } .tab ul li{ display:inline-block; width:33.3333%; float:left; line-height:40px; text-align:center; cursor:pointer; } .tab ul li:hover, .tab ul li.on{ background:#ccc; } .tab .conBox{ width:100%; height:auto; overflow:hidden; min-height:200px; background:#ccc; display:none; text-align:center; } .tab .conBox.on{ display:block; }HTML / JAVASCRIPT<div class="tab"> <ul> <li data-id="con1" class="on">tab #1</li> <li data-id="con2">tab #2</li> <li data-id="con3">tab #3</li> </ul> <div id="con1" class="conBox on"> cont1 </div> <div id="con2" class="conBox"> cont2 </div> <div id="con3" class="conBox"> cont3 </div></div><script> $(function(){ $(".tab ul li").click(function(){  $(".tab ul li").removeClass('on'); $(".tab .conBox").removeClass('on'); $(this).addClass('on'); $("#"+$(this).data('id')).addClass('on'); }); });</script>