jQuery 탭메뉴 - 이미지 탭메뉴 / li 안에 div 구조로

4. 탭메뉴 리스트 속에 컨텐즈 존재하게 !! li 안에 div 구조로

html

 

	

		
		
1번탭내용
	
	

		
		
2번탭내용
	
	

		
		
3번탭내용
	
	

		
		
4번탭내용
	

css

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

js

 
$(function(){
	 $(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'));
			}

		});

			
			//on class 없이도 제어  
			//$('.tab div').hide();
			//$('.tab div').eq(tabType).show();


		//class li에 on제어 
		$('.tab li').removeClass('on');
		$('.tab li').eq(tabType).addClass('on');	



	});


 });

css로 on 클레스 만들어서 사용하는게 더 효과적이다. !