jQuery 탭메뉴 - 텍스트로된 탭메뉴 / 앵커기능으로 제어

1. 앵커로 탭메뉴

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}
	.con_wrap{position:relative;height:200px;border:1px solid red}
	.con_wrap .con{position:absolute;left:0;top:0}
	.con_wrap .con:nth-child(2){display:none}
	.con_wrap .con:nth-child(3){display:none}
	.con_wrap .con:nth-child(4){display:none}

js

$(function(){
	$(".tab a").click(function(){
		
		var tabType=$(this).attr('href');
		$(tabType).show().siblings(".con").hide();
        })


 });

- click() 이벤트

클릭을 하면 이벤트를 발생

- attr() 메소드

attr(attribute) = attr(속성); - 속성의 값 가져오기

attr(attribute,value) = attr({속성:값, 속성:값}); - 대상의 속성을 값으로 설정