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>jquery06_addClass</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{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 -->
<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 a:eq(0)").click(function(){
$("#tab-cont img").attr({"src":"img/img01.jpg", "alt":"이미지1"});
});
//두번째 버튼을 클릭하면 두번째 이미지 주소로 속성을 변경
$("#tab-btn ul li a:eq(1)").click(function(){
$("#tab-cont img").attr({"src":"img/img02.jpg", "alt":"이미지2"});
});
//세번째 버튼을 클릭하면 세번째 이미지 주소로 속성을 변경
$("#tab-btn ul li a:eq(2)").click(function(){
$("#tab-cont img").attr({"src":"img/img03.jpg", "alt":"이미지3"});
});
//네번째 버튼을 클릭하면 네번째 이미지 주소로 속성을 변경
$("#tab-btn ul li a:eq(3)").click(function(){
$("#tab-cont img").attr({"src":"img/img04.jpg", "alt":"이미지4"});
});
//다섯번째 버튼을 클릭하면 다섯번째 이미지 주소로 속성을 변경
$("#tab-btn ul li a: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)
/*$("#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");
});*/
//첫번째 버튼을 클릭하면 첫번째 컨텐츠를 보여준다.
/*$("#tab-btn > ul >li:eq(0)").click(function(){
$("#tab-cont > div").css("display","none");
$("#tab-cont > div:eq(0)").css("display","block");
});
//두번째 버튼을 클릭하면 두번째 컨텐츠를 보여준다.
$("#tab-btn > ul >li:eq(1)").click(function(){
$("#tab-cont > div").css("display","none");
$("#tab-cont > div:eq(1)").hide().css("display","block");
});
//세번째 버튼을 클릭하면 세번째 컨텐츠를 보여준다.
$("#tab-btn > ul >li:eq(2)").click(function(){
$("#tab-cont > div").css("display","none");
$("#tab-cont > div:eq(2)").css("display","block");
});
//네번째 버튼을 클릭하면 네번째 컨텐츠를 보여준다.
$("#tab-btn > ul >li:eq(3)").click(function(){
$("#tab-cont > div").css("display","none");
$("#tab-cont > div:eq(3)").css("display","block");
});
//다섯번째 버튼을 클릭하면 다섯번째 컨텐츠를 보여준다.
$("#tab-btn > ul >li:eq(4)").click(function(){
$("#tab-cont > div").css("display","none");
$("#tab-cont > div:eq(4)").css("display","block");
});*/
//for문을 5번 반복 스크립트 만들어보기 (2)
/*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");
});
}*/
/*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");
});
}*/
//5번 반복 스크립트 만들어보기 (3)
$("#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");
});let tabBtn = $("#tab-btn > ul > li"); //각각의 버튼을 변수에 저장
let tabCont = $("#tab-cont > div"); //각각의 컨텐츠을 변수에 저장
//모튼 컨텐츠를 숨겨주세요
tabCont.hide().eq(0).show();
//첫 번째 버튼을 클릭하면 첫 번째 컨텐츠만 보여주세요!
// tabBtn.eq(0).click(function(){
// tabBtn.removeClass().eq(0).addClass("active");
// tabCont.hide().eq(0).show();
// });
// tabBtn.eq(1).click(function(){
// tabBtn.removeClass().eq(1).addClass("active");
// tabCont.hide().eq(1).show();
// });
// tabBtn.eq(2).click(function(){
// tabBtn.removeClass().eq(2).addClass("active");
// tabCont.hide().eq(2).show();
// });
// tabBtn.eq(3).click(function(){
// tabBtn.removeClass().eq(3).addClass("active");
// tabCont.hide().eq(3).show();
// });
// tabBtn.eq(4).click(function(){
// tabBtn.removeClass().eq(4).addClass("active");
// tabCont.hide().eq(4).show();
// });
// //for 문
// for( let i = 0; i < tabBtn.length; i++){
// tabBtn.eq(i).click(function(){
// tabBtn.removeClass().eq(i).addClass("active");
// tabCont.hide().eq(i).show();
// });
// }
tabBtn.click(function(){
let target = $(this);
let index = target.index();
tabBtn.removeClass().eq(index).addClass("active");
tabCont.hide().eq(index).fadeIn();
});Last updated
Was this helpful?