jQuery 탭메뉴 - 텍스트로된 탭메뉴 / 클레스 제어

2. 클래스없이 탭메뉴

html

	
1번탭
	
2번탭
	
3번탭
	
4번탭


	
1번탭내용
	
2번탭내용
	
3번탭내용
  
	
4번탭내용
 

css

 ul,li{list-style:none}
	.tab{overflow:hidden}
	.tab li{float:left;width:33%;border:1px solid #fff}
	.tab li a{display:block;width:100%;height:50px;line-height:50px;background:pink;text-align:center}
	.tab li a.on{background:blue}
	.con_wrap{position:relative;height:200px;border:1px solid red}
	.con_wrap div{position:absolute;left:0;top:0;}
	.con_wrap div:nth-child(2){display:none}
	.con_wrap div:nth-child(3){display:none}
	.con_wrap div:nth-child(4){display:none}

js

 
$(function(){
	$(".tab li").click(function(){
		

		var tabType = $(this).index();
		
		$('.con_wrap div').hide();
		$('.con_wrap div').eq(tabType).show();

		$('.tab a').removeClass('on');
		$('.tab a').eq(tabType).addClass('on');	
		
	})


 });

* TIP 

1. 선택한 태그가 몇번째 위치지인지 알수 있는 함수 

2. 특정 위치를 찾는 함수 

- eq(n) : n번째로 일치하는 엘리먼트