attr() / removeAttr()

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

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <style>
        * {margin: 0; padding: 0;}
        ul {list-style: none;}
        a {text-decoration: none; color: #fff;}
        #tab-menu {width: 500px; margin: 50px auto; background: #ccc;}
        #tab-btn {}
        #tab-btn ul {overflow: hidden;}
        #tab-btn li {float: left; width: 20%; text-align: center;}
        #tab-btn li a {padding: 20px; background: #1e88e5; display: block;}
        #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.png" alt="이미지1" width="500">
        </div>
    </div>
    <!-- script -->
    <script src="jquery.min_1.12.4.js"></script>
    <script>
      //버튼을 클릭하면 이미지 속성 주소값을 변경

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

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

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

//모든 컨텐츠를 숨기고 첫 번째 컨테츠만 보여주세요
tabCont.hide().eq(0).show();

//첫 번째 버튼을 클릭하면
// tabBtn.eq(0).find("a").click(function(){
// 	tabBtn.removeClass();
// 	tabBtn.eq(0).addClass("active");
// 	tabBtn.find("div").hide();
// 	tabBtn.eq(0).find("div").show();
// });
// tabBtn.eq(1).find("a").click(function(){
// 	tabBtn.removeClass();
// 	tabBtn.eq(1).addClass("active");
// 	tabBtn.find("div").hide();
// 	tabBtn.eq(1).find("div").show();
// });
// tabBtn.eq(2).find("a").click(function(){
// 	tabBtn.removeClass();
// 	tabBtn.eq(2).addClass("active");
// 	tabBtn.find("div").hide();
// 	tabBtn.eq(2).find("div").show();
// });
// tabBtn.eq(3).find("a").click(function(){
// 	tabBtn.removeClass();
// 	tabBtn.eq(3).addClass("active");
// 	tabBtn.find("div").hide();
// 	tabBtn.eq(3).find("div").show();
// });
// tabBtn.eq(4).find("a").click(function(){
// 	tabBtn.removeClass();
// 	tabBtn.eq(4).addClass("active");
// 	tabBtn.find("div").hide();
// 	tabBtn.eq(4).find("div").show();
// });

//for문을 이용해서
// for(let i=0; i<tabBtn.length; i++){
// 	tabBtn.eq(i).find("a").click(function(){
// 		tabBtn.removeClass();
// 		tabBtn.eq(i).addClass("active");
// 		tabBtn.find("div").hide();
// 		tabBtn.eq(i).find("div").show();
// 	});
// }

//this를 이용해서
// tabBtn.find("a").click(function(){
// 	let target = $(this);
// 	let index = target.index();
// 	tabBtn.removeClass();
// 	tabBtn.eq(index).addClass("active");
// 	tabBtn.find("div").hide();
// 	tabBtn.eq(index).find("div").show();
// });

PreviousscrollTop() / scrollLeft()NextaddClass() / removeClass()

Last updated

Was this helpful?