꿈을꾸고있는

html

 
  
 
	

		

			
1
			
2
			
3
			
4
		
	
	

		
	
	
	

css

 
   .banner_wrap{position:relative; padding:100px}
	.banner_wrap .btn{display:block; width:50px; height:50px; position:absolute; left:30px; top:120px;}
	.banner_wrap .btn.btn_next{position:absolute; left:330px; top:120px;}
	.banner_wrap .banner{overflow:hidden; width:200px; height:100px}
	.banner_wrap .banner ul{*zoom:1; wid th:600px;}
	.banner_wrap .banner ul:after{display:block; content:""; clear:both;}
	.banner_wrap .banner ul li{float:left; width:200px; height:100px; background-color:#fff;}
	.indicator{width:200px; margin-top:10px; text-align:center;}
	.indicator a{display:inline-block; margin:0 2px; border:1px solid #fff; width:14px; height:14px; border-radius:10px; background-color:#fff;}
	.indicator a.on{border:1px solid #bc6848;  background-color:#bc6848; }

jquery

 
 $(document).ready(function(){
	// li갯수
	var liLength = $(".banner ul li").size();

	// ul 넓이
	var ulWidth = 200* liLength
	$(".banner ul").css("width",ulWidth+"px")

	// 좌우 버튼 
	$(".btn_prev").click(function(){
		if($(".banner ul").css("margin-left") == "0px"){
			$(".banner ul").css("margin-left","0");
			indicator();
		}else{
				//조건시작
				if(!$(".banner ul").is(":animated")){
					$(".banner ul").animate({"margin-left":"+=200"},500,function(){
						indicator();
					});
				}
				//조건끝		
			}
	});
	
	$(".btn_next").click(function(){
		if($(".banner ul").css("margin-left") == "-"+(ulWidth-200)+"px"){
			$(".banner ul").css("margin-left","-"+(ulWidth-200)+"px");
			indicator();
		}else{
			//조건시작
			if(!$(".banner ul").is(":animated")){
				$(".banner ul").animate({"margin-left":"-=200"},500,function(){	
					indicator();
				});	
			}
			//조건끝			
		}	
	});
	
	// indicator Length
	for(var i=0 ; i");
		}else{
			$(".indicator").append("");
		}
	}

	// indicator index 
	$(".indicator a").click(function(){
		var paging = $(this).index();
		$(".banner ul").animate({"margin-left":paging*-200+"px"},500);
		$(".indicator a").removeClass("on");
		$(".indicator a").eq(paging).addClass("on");
	});

	//좌우indicator 함수
	function indicator(){
		var leftPosition = parseInt($(".banner ul").css("margin-left"));	//parseInt 숫자값으로 변환 	
		var anchorIndex = -(leftPosition/200);
		//var anchorIndex = Math.abs(leftPosition/200);
		$(".indicator a").removeClass("on");
		$(".indicator a").eq(anchorIndex).addClass("on");	
		//$(".indicator a").eq(-( parseInt($(".banner ul").css("margin-left"))/200)).addClass("on"); 
	}
	
});

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 클레스 만들어서 사용하는게 더 효과적이다. !

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();

	});


 });

2. 클래스없이 탭메뉴

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}
	.tab li a.on{background:blue}
	.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();
		
		$('.con_wrap div').hide();
		$('.con_wrap div').eq(tabType).show();

		$('.tab a').removeClass('on');
		$('.tab a').eq(tabType).addClass('on');	
		
	})


 });

* TIP 

1. 선택한 태그가 몇번째 위치지인지 알수 있는 함수 

2. 특정 위치를 찾는 함수 

- eq(n) : n번째로 일치하는 엘리먼트

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({속성:값, 속성:값}); - 대상의 속성을 값으로 설정