1。
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 4 <title>事件处理之CSS效果切换</title> 5 <style type="text/css"> 6 .buttons { 7 width: 100px; 8 float: left; 9 text-align: center; 10 margin: 5px; 11 border: 1px solid; 12 font-weight: bold; 13 } 14 .hover { 15 cursor: crosshair; 16 color: blue; 17 background-color:#008000; 18 } 19 </style> 20 <script src="../jquery-1.5.2.js" type="text/javascript"></script> 21 <script type="text/javascript"> 22 $(document).ready(function(){ 23 /* 24 * .toggleClass(class) 25 * 是在指定的元素上应用CSS类(如果尚未应用),或者删除CSS类(如果已经应用) 26 * 27 * .toggle(handler1, handler2) 28 * handler1在事件偶数次发生时执行,从0开始计数 29 * handler2在事件奇数次发生时执行 30 */ 31 //$('.buttons').click(function(){ 32 //$(this).toggleClass('hover'); 33 //}); 34 35 //下面几行代码同上面是等效的 36 //toggle切换 trigger触发 37 $('.buttons').toggle( 38 function(){ 39 $(this).addClass('hover'); 40 }, 41 function(){ 42 $(this).removeClass('hover'); 43 } 44 ); 45 46 47 }); 48 49 </script> 50 <body> 51 <span class="bold buttons">Bold Button</span> 52 <span class="italic buttons">Italic Button</span> 53 </body> 54 </html>