15.jQuery - ToggleClass ( 15.ToggleClass )
[
14.jQuery - Toggle ] 예제를 Class (클래스)로 사용한 예제입니다.
| 15.ToggleClass.htm |
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>toggleClass()메서드로 CSS 클래스에 대한 토글링</title> <style type="text/css"> .hidden { display:none; } </style> <script src="jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { // [!] hidden CSS Class에 대해서 addClass() < - > removeClass() $('#btn').click(function () { $('#myLayer').toggleClass('hidden'); }); }); </script> </head> <body> <h3>버튼을 클릭할 때마다 레이어 보이기/숨기기</h3> <input id="btn" type="button" value="버튼" /> <div id="myLayer" style="background-color:Yellow;"> 안녕 </div> </body> </html> |
| 결과화면 |
 [그림15-1] |
15.ToggleClass.htm