jQuery 탭메뉴 - 이미지 탭메뉴

3. 이미지로 된 탭메뉴

html

	

	

	

	



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

css

 
 ul,li{list-style:none}
	.tab{overflow:hidden}
	.tab li{float:left;width:63px;border:1px solid #fff}
	.tab li a{display:block;width:100%;height:50px;line-height:50px;text-align:center}
	.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();
		
			$('.tab li').each(function(index){
			$(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off','_on'));
			if(tabType != index){
				$(this).find('img').attr('src', $(this).find('img').attr('src').replace('_on','_off'));
			}
		});

			$('.con_wrap>div').eq(tabType).show().siblings('div').hide();

	});


 });