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{
		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>