Attr()/removeAttr()

Attr()메서드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때 또는 요소의 속성값을 불러올 때 사용합니다. removeAttr()메서드는 선택한 요소에서 기존의 속성을 삭제할 때 사용합니다.

$("선택자").attr("속성"); $("선택자").attr("속성", "속성값"); $("선택자").attr({"속성": "속성값", "속성": "속성값",...}); $("선택자").removeAttr("속성");

탭 메뉴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>attr2</title>
    <style>
        * {margin: 0; padding: 0;}
        ul {list-style: none;}
        a {text-decoration: none; color: #ffffff;}
        #tab-menu {width: 500px; margin: 50px auto; background: #cccccc;}
        #tab-btn {}
        #tab-btn ul {overflow: hidden;}
        #tab-btn li {float: left; width: 20%; text-align: center;}
        #tab-btn li a {display: block; padding: 20px; background: #1e88e5;}
        #tab-cont {width: 500px; height: 334px;}
        
    </style>
</head>
<body>

   <div id="tab-menu">
        <div id="tab-btn">
            <!-- ul>li*5>a[href="#"]{Tab#} -->
            <ul>
                <li><a href="#">Tab1</a></li>
                <li><a href="#">Tab2</a></li>
                <li><a href="#">Tab3</a></li>
                <li><a href="#">Tab4</a></li>
                <li><a href="#">Tab5</a></li>
            </ul>
        </div>
        <div id="tab-cont">
            <img src="img/img01.jpg" alt="이미지01" width="500">
        </div>
   </div>

    <!-- script -->
    <script src="jquery.min_1.12.4.js"></script>
    <script>
        //버튼을 클릭하면 모든 글씨를 "Menu"로 변경
        // $("#tab-btn ul li").click(function(){
        //     $("#tab-btn ul li a").text("Menu");
        // });

        //버튼을 클릭하면 클릭한 글씨를 "Menu"로 변경
        // $("#tab-btn ul li a").click(function(){
        //     $(this).text("Menu");
        // });

        //n번째 버튼을 클릭하면 n 번째 이미지 주소로 속성을 변경
            $("#tab-btn ul li:eq(0)").click(function(){
                $("#tab-cont img").attr({"src":"img/img01.jpg", "alt":"이미지1"})
            });
            $("#tab-btn ul li:eq(1)").click(function(){
                $("#tab-cont img").attr({"src":"img/img02.jpg", "alt":"이미지2"})
            });
            $("#tab-btn ul li:eq(2)").click(function(){
                $("#tab-cont img").attr({"src":"img/img03.jpg", "alt":"이미지3"})
            });
            $("#tab-btn ul li:eq(3)").click(function(){
                $("#tab-cont img").attr({"src":"img/img04.jpg", "alt":"이미지4"})
            });
            $("#tab-btn ul li:eq(4)").click(function(){
                $("#tab-cont img").attr({"src":"img/img05.jpg", "alt":"이미지5"})
            });
    </script>
</body>
</html>

for문과 index

//모든 컨텐츠를 숨기고 첫 번째 컨텐츠만 노출
$("#tab-cont > div").hide().eq(0).show();

// //1번째 버튼을 클릭하면 1번째 버튼한테 클래스를 추가
// $("#tab-btn > ul > li:eq(0)").click(function(){
// 	$("#tab-btn > ul > li").removeClass("active");
// 	$(this).addClass("active");
// });
// $("#tab-btn > ul > li:eq(1)").click(function(){
// 	$("#tab-btn > ul > li").removeClass("active");
// 	$(this).addClass("active");
// });
// $("#tab-btn > ul > li:eq(2)").click(function(){
// 	$("#tab-btn > ul > li").removeClass("active");
// 	$(this).addClass("active");
// });
// $("#tab-btn > ul > li:eq(3)").click(function(){
// 	$("#tab-btn > ul > li").removeClass("active");
// 	$(this).addClass("active");
// });
// $("#tab-btn > ul > li:eq(4)").click(function(){
// 	$("#tab-btn > ul > li").removeClass("active");
// 	$(this).addClass("active");
// });

// //1번째 버튼을 클릭하면 1번째 컨텐츠를 보여준다.
// $("#tab-btn > ul > li:eq(0)").click(function(){
// 	$("#tab-cont > div").css("display","none");
// 	$("#tab-cont > div:eq(0)").css("display","block");
// });
// //2번째 버튼을 클릭하면 2번째 컨텐츠를 보여준다.
// $("#tab-btn > ul > li:eq(1)").click(function(){
// 	$("#tab-cont > div").css("display","none");
// 	$("#tab-cont > div:eq(1)").css("display","block");
// });
// //3번째 버튼을 클릭하면 3번째 컨텐츠를 보여준다.
// $("#tab-btn > ul > li:eq(2)").click(function(){
// 	$("#tab-cont > div").css("display","none");
// 	$("#tab-cont > div:eq(2)").css("display","block");
// });
// //4번째 버튼을 클릭하면 4번째 컨텐츠를 보여준다.
// $("#tab-btn > ul > li:eq(3)").click(function(){
// 	$("#tab-cont > div").css("display","none");
// 	$("#tab-cont > div:eq(3)").css("display","block");
// });
// //5번째 버튼을 클릭하면 5번째 컨텐츠를 보여준다.
// $("#tab-btn > ul > li:eq(4)").click(function(){
// 	$("#tab-cont > div").css("display","none");
// 	$("#tab-cont > div:eq(4)").css("display","block");
// }); 



// //1. for문을 5번 반복 스크립트를 만들어보세요.
// for( let i=0; i<5; i++){
// 	$("#tab-btn > ul > li:eq("+i+")").click(function(){
// 		$("#tab-btn > ul > li").removeClass("active");
// 		$(this).addClass("active");
// 	});
	
// 	$("#tab-btn > ul > li:eq("+i+")").click(function(){
// 		$("#tab-cont > div").css("display","none");
// 		$("#tab-cont > div:eq("+i+")").css("display","block");
// 	});
// }

//2. for문 
// for( let i=0; i<5; i++){
// 	$("#tab-btn > ul > li:eq("+i+")").click(function(){
// 		$("#tab-btn > ul > li").removeClass("active");
// 		$(this).addClass("active");
// 		$("#tab-cont > div").css("display","none");
// 		$("#tab-cont > div:eq("+i+")").css("display","block");
// 	});
// }

//3. for문을 index로 써보기(실무에서 많이 사용하는 방법) 
$("#tab-btn > ul > li").click(function(){
	let target = $(this);    //버튼의 타깃을 변수에 저장
	let index = target.index(); //버튼의 인텍스를 변수에 저장  
	$("#tab-btn > ul > li").removeClass("active");
	target.addClass("active");
	$("#tab-cont > div").css("display","none");
	$("#tab-cont > div").eq(index).css("display","block");
	
});

PrevioushasClass()Nextposition()/offset()

Last updated 4 years ago

Was this helpful?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>attr2</title> <style> * {margin: 0; padding: 0;} ul {list-style: none;} a {text-decoration: none; color: #ffffff;} #tab-menu {width: 500px; margin: 50px auto; background: #cccccc;} #tab-btn {} #tab-btn ul {overflow: hidden;} #tab-btn li {float: left; width: 20%; text-align: center;} #tab-btn li a {display: block; padding: 20px; background: #1e88e5;} #tab-cont {width: 500px; height: 334px;} </style> </head> <body> <div id="tab-menu"> <div id="tab-btn">  <ul> <li><a href="#">Tab1</a></li> <li><a href="#">Tab2</a></li> <li><a href="#">Tab3</a></li> <li><a href="#">Tab4</a></li> <li><a href="#">Tab5</a></li> </ul> </div> <div id="tab-cont"> <img src="img/img01.jpg" alt="이미지01" width="500"> </div> </div>  <script src="jquery.min_1.12.4.js"></script> <script> //버튼을 클릭하면 모든 글씨를 "Menu"로 변경 // $("#tab-btn ul li").click(function(){ // $("#tab-btn ul li a").text("Menu"); // }); //버튼을 클릭하면 클릭한 글씨를 "Menu"로 변경 // $("#tab-btn ul li a").click(function(){ // $(this).text("Menu"); // }); //n번째 버튼을 클릭하면 n 번째 이미지 주소로 속성을 변경 $("#tab-btn ul li:eq(0)").click(function(){ $("#tab-cont img").attr({"src":"img/img01.jpg", "alt":"이미지1"}) }); $("#tab-btn ul li:eq(1)").click(function(){ $("#tab-cont img").attr({"src":"img/img02.jpg", "alt":"이미지2"}) }); $("#tab-btn ul li:eq(2)").click(function(){ $("#tab-cont img").attr({"src":"img/img03.jpg", "alt":"이미지3"}) }); $("#tab-btn ul li:eq(3)").click(function(){ $("#tab-cont img").attr({"src":"img/img04.jpg", "alt":"이미지4"}) }); $("#tab-btn ul li:eq(4)").click(function(){ $("#tab-cont img").attr({"src":"img/img05.jpg", "alt":"이미지5"}) }); </script> </body> </html>

//모든 컨텐츠를 숨기고 첫 번째 컨텐츠만 노출 $("#tab-cont > div").hide().eq(0).show(); // //1번째 버튼을 클릭하면 1번째 버튼한테 클래스를 추가 // $("#tab-btn > ul > li:eq(0)").click(function(){ // $("#tab-btn > ul > li").removeClass("active"); // $(this).addClass("active"); // }); // $("#tab-btn > ul > li:eq(1)").click(function(){ // $("#tab-btn > ul > li").removeClass("active"); // $(this).addClass("active"); // }); // $("#tab-btn > ul > li:eq(2)").click(function(){ // $("#tab-btn > ul > li").removeClass("active"); // $(this).addClass("active"); // }); // $("#tab-btn > ul > li:eq(3)").click(function(){ // $("#tab-btn > ul > li").removeClass("active"); // $(this).addClass("active"); // }); // $("#tab-btn > ul > li:eq(4)").click(function(){ // $("#tab-btn > ul > li").removeClass("active"); // $(this).addClass("active"); // }); // //1번째 버튼을 클릭하면 1번째 컨텐츠를 보여준다. // $("#tab-btn > ul > li:eq(0)").click(function(){ // $("#tab-cont > div").css("display","none"); // $("#tab-cont > div:eq(0)").css("display","block"); // }); // //2번째 버튼을 클릭하면 2번째 컨텐츠를 보여준다. // $("#tab-btn > ul > li:eq(1)").click(function(){ // $("#tab-cont > div").css("display","none"); // $("#tab-cont > div:eq(1)").css("display","block"); // }); // //3번째 버튼을 클릭하면 3번째 컨텐츠를 보여준다. // $("#tab-btn > ul > li:eq(2)").click(function(){ // $("#tab-cont > div").css("display","none"); // $("#tab-cont > div:eq(2)").css("display","block"); // }); // //4번째 버튼을 클릭하면 4번째 컨텐츠를 보여준다. // $("#tab-btn > ul > li:eq(3)").click(function(){ // $("#tab-cont > div").css("display","none"); // $("#tab-cont > div:eq(3)").css("display","block"); // }); // //5번째 버튼을 클릭하면 5번째 컨텐츠를 보여준다. // $("#tab-btn > ul > li:eq(4)").click(function(){ // $("#tab-cont > div").css("display","none"); // $("#tab-cont > div:eq(4)").css("display","block"); // }); // //1. for문을 5번 반복 스크립트를 만들어보세요. // for( let i=0; i<5; i++){ // $("#tab-btn > ul > li:eq("+i+")").click(function(){ // $("#tab-btn > ul > li").removeClass("active"); // $(this).addClass("active"); // }); // $("#tab-btn > ul > li:eq("+i+")").click(function(){ // $("#tab-cont > div").css("display","none"); // $("#tab-cont > div:eq("+i+")").css("display","block"); // }); // } //2. for문 // for( let i=0; i<5; i++){ // $("#tab-btn > ul > li:eq("+i+")").click(function(){ // $("#tab-btn > ul > li").removeClass("active"); // $(this).addClass("active"); // $("#tab-cont > div").css("display","none"); // $("#tab-cont > div:eq("+i+")").css("display","block"); // }); // } //3. for문을 index로 써보기(실무에서 많이 사용하는 방법) $("#tab-btn > ul > li").click(function(){ let target = $(this); //버튼의 타깃을 변수에 저장 let index = target.index(); //버튼의 인텍스를 변수에 저장 $("#tab-btn > ul > li").removeClass("active"); target.addClass("active"); $("#tab-cont > div").css("display","none"); $("#tab-cont > div").eq(index).css("display","block"); });