다루두루

블로그 이미지

차케요

공부하면서 정리하는 노트같은 블로그입니다.

JQuery removeClass

HTML 공부 2015. 3. 26. 15:12

JQuery removeClass


■ 지난 글에서는 CSS의 클래스 속성을 추가하는 메서드인 'addClass'에 대해서 알아봤었는데요. 이번에는 적용된 클래스를 제거하는 'removeClass'에 대해서 알아보겠습니다. removeClass 메서드의 형식은 다음과 같습니다. 


$("선택자").removeClass("클래스");


■ 이때 클래스는 addClass와 마찬가지로 클래스 구분자인 마침표(.)는 생략합니다. 개념은 간단하기 때문에 바로 예제를 만들어서 확인해볼 텐데요. 버튼을 만들어서 클릭하면 addClass를 이용해서 스타일을 적용했다가 또 다른 버튼을 클릭하면 removeClass를 이용해서 제거하는 형식으로 만들어보겠습니다. 

 

 


▲ 본문에는 박스 하나와 버튼 두 개를 배치했습니다.


▲ CSS인데요. aaa 클래스의 스타일이 적용되어 있다가 버튼을 클릭하면 bbb의 속성이 적용돼서 배경색을 파란색으로 바꾸도록 하고, 해제 버튼을 클릭하면 bbb클래스가 제거돼서 다시 노란색 배경으로 바뀌도록 하겠습니다. 


▲ 클릭 이벤트를 적용해서 각 버튼을 클릭할 때마다 addClass와 removeClass 메서드가 실행되도록 하는 내용입니다. 브라우저에서 확인해볼게요.


▲ 브라우저에서 실행한 후 [스타일 적용] 버튼을 클릭하면 배경색이 파란색으로 바뀌고, [스타일 해제] 버튼을 클릭하면 다시 노란색으로 바뀌는 걸 확인할 수 있습니다. ^^


 이렇게 해서 JQuery의 removeClass 메서드에 대해서 알아봤습니다. 수고하셨어요.

저작자표시 비영리 변경금지 (새창열림)
Posted by 차케요

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • 더 보기

카테고리

NEW (900)
아이폰 개발 기초 (7)
취미 (16)
아두이노 (16)
[안드로이드] 어플만들기 (77)
안드로이드 기초 다지기 (61)
슈팅게임 만들기 (4)
[JAVA]자바 공부하기 (48)
C언어 알고리즘 (61)
[Unity3D]유니티3D 강좌 (7)
컴퓨터 (325)
포토샵CS2 강좌 (6)
유용한 프로그램 (244)
리눅스 노트정리 (22)
임베디드 리눅스 (11)
New블로그 (9)
음식의 효능 (4)
일반상식 (56)
HTML 공부 (40)
포토샵 공부 (36)
엑셀 (6)
파워포인트 공부 (19)
노트정리 (38)
일상 (33)
TV영화 (85)
방명록 : 관리자 : 글쓰기
차케요's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

다루두루

공부하면서 정리하는 노트같은 블로그입니다.

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • NEW (900)
    • 아이폰 개발 기초 (7)
    • 취미 (16)
      • 아두이노 (16)
    • [안드로이드] 어플만들기 (77)
      • 안드로이드 기초 다지기 (61)
      • 슈팅게임 만들기 (4)
    • [JAVA]자바 공부하기 (48)
    • C언어 알고리즘 (61)
    • [Unity3D]유니티3D 강좌 (7)
    • 컴퓨터 (325)
      • 포토샵CS2 강좌 (6)
      • 유용한 프로그램 (244)
    • 리눅스 노트정리 (22)
      • 임베디드 리눅스 (11)
    • New블로그 (9)
    • 음식의 효능 (4)
    • 일반상식 (56)
    • HTML 공부 (40)
    • 포토샵 공부 (36)
    • 엑셀 (6)
    • 파워포인트 공부 (19)
    • 노트정리 (38)
    • 일상 (33)
    • TV영화 (85)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바