1 개요[ | ]
- jQuery .toggleClass()
- 클래스를 토글(ON/OFF, 추가/삭제)하는 jQuery 메소드
- 여러 클래스 동시에 토글 가능
2 예시 1[ | ]
html
Copy
<style>
.highlight { background: yellow; }
#btn1 { width: 100px; height: 35px; }
</style>
<script src='//code.jquery.com/jquery.min.js'></script>
<script>
$(function() {
$('#btn1').click(function() {
$('#greet').toggleClass('highlight');
});
});
</script>
<div id='greet'>안녕 친구들</div>
<br><button id='btn1'>토글 버튼</button>
3 예시 2[ | ]
html
Copy
<style>
.highlight { background: yellow; }
.red { color: red; }
#btn1 { width: 100px; height: 35px; }
</style>
<script src='//code.jquery.com/jquery.min.js'></script>
<script>
$(function() {
$('#btn1').click(function() {
$('#greet').toggleClass('highlight red');
});
});
</script>
<div id='greet' class='highlight red'>안녕 친구들</div>
<br><button id='btn1'>토글 버튼</button>
4 같이 보기[ | ]
5 참고[ | ]
편집자 Jmnote Jmnote bot 106.251.64.227 118.32.191.131
로그인하시면 댓글을 쓸 수 있습니다.