1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 6 7 <title>简单的开灯关灯效果</title> 8 <style type="text/css"> 9 .cls 10 { 11 background-color: Gray; 12 } 13 </style> 14 <script src="jquery-1.10.2.js" type="text/javascript"></script> 15 <script type="text/javascript"> 16 $(function () { 17 $('#Btn').click(function () { 18 if ($('body').hasClass('cls')) { 19 $('body').removeClass('cls'); 20 $('#Btn').val('关灯'); 21 } else { 22 $('body').addClass("cls"); 23 $('#Btn').val('开灯'); 24 } 25 26 }); 27 }); 28 </script> 29 30 </head> 31 <body> 32 <input type="button" value="开灯/关灯" id="Btn" /> 33 </body> 34 </html>
一个简单的模拟。