택스트 on_off 탭메뉴 1

만든걸 응용하면 이미지도 금방해결볼듯....탭메뉴 제대로 굴러가는 소스를 찾다찾다 그냥 넘겼는데 공부하는겸 한번 짜봤다.

3번에 걸쳐 간소화 시켰다. 숫자를 함수로 만들면 더 간단해질듯.... 

//아...이미진 좀 다른데? ㅋㅋㅋ

JQuery
$(document).ready(function(){
 $('#tab ul>li').click(function(){
  $('#tab ul>li').removeClass('on');
  $(this).addClass('on'); 
  $('#tabDocBox > div').removeClass('block'); 
 });  
 $('#tabDoc1').click(function(){  
  $('#tabDocBox .Doc1').addClass('block');   
 });
 $('#tabDoc2').click(function(){  
  $('#tabDocBox .Doc2').addClass('block');  
 });
 $('#tabDoc3').click(function(){  
  $('#tabDocBox .Doc3').addClass('block');   
 });
});

style
li {list-style:none;}
.block {display:block !important;}

#tab {overflow:hidden;}
#tab li{float:left; width:100px; height:35px; text-align:center; border:1px #ccc solid; cursor:pointer;}

.Doc1,
.Doc2,
.Doc3 {height:50px; border:1px red solid; display:none;}

.on {font-weight:bold;}

Html
<div id="tab">
   <ul>
    <li class="on" id="tabDoc1">menu1</li>
    <li id="tabDoc2">menu2</li>
    <li id="tabDoc3">menu3</li>
   </ul>
    </div>
    <div id="tabDocBox">
     <div class="Doc1 block">

   내용1 간소화 시작

     </div>
   <div class="Doc2">

   내용2 간소화 하고있냐?

     </div>
   <div class="Doc3">

   내용3 간소화 종료

     </div>
   </div>