jQuery 강좌 | Methods > .toggleClass()

.toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다.

문법

.toggleClass( className )

예제

http://book.cmsfactory.net/jQuery/V01/Methods/toggleCalss-01.html

버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 삭제되어 배경색이 사라지는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Method | .toggleClass()</title>
    <style>
      .ab {
        background-color: #27a9e3;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button' ).click( function() {
          $( 'h1' ).toggleClass( 'ab' );
        } );
      } );
    </script>
  </head>
  <body>
    <button>Click</button>
    <h1>Lorem Ipsum Dolor</h1>
  </body>
</html>

Category

Created on 2014-03-05 12:29 | Updated on 2015-07-17 01:19

이 글을 공유하기

Kakao