[jQuery] 탭메뉴 만들기

CSS

.wrap{width:1000px;}
.tab_area{width:100%;}
.tab_area ul li{list-style:none;width:33%;height:33px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;background:#efefef;text-align:center;float:left;}
.tab_area ul li.t01{border-left:1px solid #ccc;}
.tab_area ul li.t02{border-left:1px solid #ccc;border-right:1px solid #ccc;}
.tab_area ul li.t03{border-right:1px solid #ccc;}
.tab_area ul li a{line-height:33px;display:block;text-decoration:none;color: #666;}
.tab_area ul li.on{border-top:2px solid #333;background:#fff;border-bottom:0;}
.tcon02{display: none;}
.tcon03{display: none;}

HTML

 

	

		

			
탭1
			
탭2
			
탭3
		
		

			
내용1
		
		

			
내용2
		
		

			
내용3
		
	

Jquery

$(function(){
	$(".tab_area ul > li").on("click","a",function(){
		var $idx = $(this).closest("li").index()+1;
		fnTabChk($idx);
	});

	function fnTabChk(nParam){
	$(".t01").removeClass("on");
	$(".t02").removeClass("on");
	$(".t03").removeClass("on");
	$(".tcon01").hide();
	$(".tcon02").hide();
	$(".tcon03").hide();

	switch(nParam){
		case 1:
			$(".t01").addClass("on");
			$(".tcon01").fadeIn(400);
		break;
		case 2:
			$(".t02").addClass("on");
			$(".tcon02").fadeIn(400);
			break;
		case 3:
			$(".t03").addClass("on");
			$(".tcon03").fadeIn(400);	
			break;
		}
	}
});

예제

• 탭1
• 탭2
• 탭3

내용1

내용2

내용3