addClass()/removeClass()
addClass() 메서드는 선택한 요소에 클래스를 생성하고. removeClass() 메서드는 선택한 요소에서 지정한 클래스를 삭제합니다.
Last updated
Was this helpful?
addClass() 메서드는 선택한 요소에 클래스를 생성하고. removeClass() 메서드는 선택한 요소에서 지정한 클래스를 삭제합니다.
Last updated
Was this helpful?
$("선택자").addClass("클래스이름"); $("선택자").removeClass("클래스 이름");
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>addClass</title>
</head>
<style>
@font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {font-family: 'Cafe24Oneprettynight';}
li.red {color: #c7254e; background-color: #f9f2f4; border: 1px dashed #a51a3d;}
</style>
<body>
<h1>탐색(Traversing)</h1>
<ul>
<li>addClass() 메서드는 선택한 요소에 클래스를 생성하고. removeClass() 메서드는 선택한 요소에서 지정한 클래스를 삭제합니다.</li>
<li>toggleClass() 메서드는 선택한 요소에 지정한 클래스가 없으면 생성하고, 있을 경우에는 삭제합니다.</li>
<li>hasClass() 메서드는 선택한 요소에 지정한 클래스가 있으면 true를 반환하고 없으면 false를 반환합니다.</li>
</ul>
<button class="btn1">addClass()</button>
<button class="btn2">removeClass()</button>
<button class="btn3">toggleClass()</button>
<!-- script -->
<script src="jquery.min_1.12.4.js.js" ></script>
<script>
//두 번째 li한테 배경색을 빨간색으로 변경
// $("li:eq(1)").css({backgroundColor:"red"});
// $("li:odd").css({backgroundColor:"red"});
// $("li:contains('toggle')").css({backgroundColor:"red"});
// $("li:nth-child(2)").css({backgroundColor:"red"});
// $("li:nth-child(2n)").css({backgroundColor:"red"});
// $("li:nth-of-type(2)").css({backgroundColor:"red"});
// $("li:nth-child(even)").css({backgroundColor:"red"});
//클릭 이벤트 메서드
$(".btn1").click(function(){
// $("li:nth-child(2)").css({backgroundColor:"red"});
$("li:nth-child(2)").addClass("red"); //red추가
});
$(".btn2").click(function(){
$("li:nth-child(2)").removeClass("red"); //red삭제
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>addClass2</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;}
#tab-cont.img01 {background: url(img/img01.jpg) no-repeat; background-size: contain;}
#tab-cont.img02 {background: url(img/img02.jpg) no-repeat; background-size: contain;}
#tab-cont.img03 {background: url(img/img03.jpg) no-repeat; background-size: contain;}
#tab-cont.img04 {background: url(img/img04.jpg) no-repeat; background-size: contain;}
#tab-cont.img05 {background: url(img/img05.jpg) no-repeat; background-size: contain;}
</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" class="img01"></div>
</div>
<!-- script -->
<script src="jquery.min_1.12.4.js.js" ></script>
<script>
//글씨를 클릭하면 경고창을
$("#tab-menu li:eq(0) a").click(function(){
$("#tab-cont").removeClass().addClass("img01");
});
$("#tab-menu li:eq(1) a").click(function(){
$("#tab-cont").removeClass().addClass("img02");
});
$("#tab-menu li:eq(2) a").click(function(){
$("#tab-cont").removeClass().addClass("img03");
});
$("#tab-menu li:eq(3) a").click(function(){
$("#tab-cont").removeClass().addClass("img04");
});
$("#tab-menu li:eq(4) a").click(function(){
$("#tab-cont").removeClass().addClass("img05");
});
</script>
</body>
</html>