이번에는 Click 시 show/hide 가되는 동작을 구현해 보도록하겠습니다.
먼저 소스를 보시죠.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>RintIanTta JQuery Lesson 1</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <style type="text/css"> .whenAHover { color:Red; background-color:Orange; } </style> <script type="text/javascript"> $(document).ready(function () { $("a").hover(aHoverIn, aHoverOut); });
function aHoverIn(){ $(this).addClass("whenAHover"); } function aHoverOut(){ $(this).removeClass("whenAHover"); } </script> </head> <body> <ul> <li><a href="#">Allips</a></li> <li><a href="#">RintIanTta</a></li> <li><a href="#">Silverlight</a></li> <li><a href="#">Windows Phone</a></li> <li><a href="#">Web Development</a></li> </ul> </body> </html> |
기존 소스에 하나씩 추가해보겠습니다.
먼저 버튼을 하나 만들겠습니다.
그리고 버튼 클릭 시에 대한 이벤트를 만들어주겠습니다.
결과.
'Skills > Web' 카테고리의 다른 글
| Query Basic 9강 - animate(1) (0) | 2014.01.13 |
|---|---|
| Query Basic 8강 - Toggle() (0) | 2014.01.13 |
| jQuery Basic 6강 - Event (0) | 2014.01.13 |
| jQuery Basic 5강 - addClass() & removeClass() (0) | 2014.01.13 |
| jQuery Basic 4강 - 변수 & 연속사용 (0) | 2014.01.13 |
