歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery動態添加和刪除class屬性

在用jQuery時,遇到一個問題,就是如何動態得添加和刪除class的屬性,下面是我的解決代碼:

  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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>測試</title>  
  6. <script type="text/javascript" src="jquery-1.7.2.js"></script>  
  7. <script type="text/javascript">  
  8. $(document).ready(function(){  
  9.   $("button").click(function(){  
  10.       
  11.     $("p:first").addClass("intro");  
  12.     $("p:first").removeClass("default");  
  13.   });  
  14. });  
  15. </script>  
  16. <style type="text/css">  
  17. .intro  
  18. {  
  19. font-size:120%;  
  20. color:red;  
  21. }  
  22. .default  
  23. {  
  24.     font-size:16;  
  25.     color:#0F9;  
  26. }  
  27. </style>  
  28. </head>  
  29.   
  30. <body>  
  31. <h1>This is a heading</h1>  
  32. <p class="default">This is a paragraph.</p>  
  33. <p>This is another paragraph.</p>  
  34. <button>向第一個 p 元素添加一個類並刪除一個類</button>  
  35. </body>  
  36. </html>  

效果如下:

點擊前:

點擊後:

Copyright © Linux教程網 All Rights Reserved