[4] JavaScript & JQuery - toggleClass()

[ 환경 ]
ㄴ JQuery 1.11.1

Q. 버튼 클릭 시 클래스명을 변경하고 싶습니다.

---

1. html 코드

<div>
	<button class="toggleclass">해당버튼 클릭시 toggleclass값 변경.</button>
	<button class="to_box">toggleclass</button>
</div>

 

2. JQuery 코드 작성

$(function(){
    // toggleclass() 활용
    $(".toggleclass").click(function(){
        $(".to_box").toggleClass('tot_box'); // toggleclass의 색상이 변하도록(색상은 css 줬음.)
    })
})

ㄴ toggleClass() - 선택한 영역의 클래스 값을 생성,삭제 반복

ㄴ 추가한 클래스에 이벤트나 css등을 부여하여 특정한 상황에서 변화를 주기 위한 용도

 

3. 사이트(기능) 확인

 

ㄴ 버튼 클릭 시 클래스명을 변경하고 싶습니다. 

- 기능 작동완료 (to_box가 기존에 있고, tot_box는 추가되었다가 사라지도록)

- to_box = 파랑색 / tot_box = 빨강색 ( 색상 변경으로 보기 쉽도록 표현 )