標籤:
$(‘div‘).addClass(‘box‘) //添加class
$(‘div‘).removeClass(‘alert‘) //刪除
$(‘div‘).hasClass(‘alert‘) //是否存在
$(‘div‘).toggleClass(‘box‘) //切換,有則刪除,無則添加
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 <head> 4 <title> new document </title> 5 </head> 6 <style> 7 div>button{ 8 background-color:#f00; 9 margin:0px;10 float:left;11 border:0px solid #fff;12 }13 div>button.pressed{14 background-color:#ddd;15 }16 </style>17 <body>18 <div>19 <button>1</button>20 <button>2</button>21 <button>3</button>22 <button>4</button>23 </div>24 25 <script src="js/jquery-1.11.3.js"></script>26 <script> 27 28 /*$(‘button‘).click(function(){29 var btn = $(‘button‘);30 if($(this).hasClass(‘pressed‘)){31 $(this).removeClass(‘pressed‘);32 }else{33 $(this).addClass(‘pressed‘);34 }35 });*/36 $(‘button‘).click(function(){37 $(this).toggleClass(‘pressed‘);38 });39 /*$(‘button‘).click(function(){40 $(‘.pressed‘).removeClass(‘pressed‘);41 $(this).addClass(‘pressed‘);42 });43 */44 </script>45 </body>46 </html>
JQuery操作class