[jQuery] attr("rel")을 사용한 여러개의 탭 만들기

한페이지에서 여러가지의 탭을 사용할때 사용하면 유용한 스크립트.

rel 값과 콘텐츠의 id 값만 맞춰주면 된다

HTML

	

		

			
탭1
			
탭2
			
탭3
		
		

			
내용1
		
		

			
내용2
		
		

			
내용3
		
	
	

		

			
탭1
			
탭2
			
탭3
		
		

			
내용1
		
		

			
내용2
		
		

			
내용3
		
	

CSS

.tab_area ul li a.on{color:red}

JS

$(function(){
	$(".conbox").hide();
	$(".tab_area .conbox:first-child").show();
	$(".tab_area ul li").on('click','a',function () {
		$(".tab_area li a").removeClass("on");
		$(this).addClass("on");
		$(this).closest("div").find(".conbox").hide();
		var activeTab = $(this).attr("rel");
		$("#" + activeTab).fadeIn();
	});
});