- 15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）
- 劉鑫
- 322字
- 2020-11-28 16:21:48
4.2 樣式的切換
jQuery還提供了一個方法toggleClass()，官方解釋是對元素進行添加/刪除類的切換操作。例如，頁面中有一個按鈕，單擊這個按鈕，頁面中所有文字由黑色變為紅色，再次單擊這個按鈕，文字又變回黑色。如果我們用JS代碼實現這個效果，那么可能首先需要判斷文字是黑色還是紅色，然后指定文字的顏色樣式。
在jQuery中，一個toggleClass()就全部搞定了。我們演示一下這種網頁顏色的切換。
【示例4-2】toggleClass.html
01 <script>
02 $(document).ready(function(){
03 $("button").click(function(){
04 $("h1, h2, p").toggleClass("blue"); //直接使用toggleClass()
05 });
06 });
07 </script>
08 <style>
09 .blue {
10 color: blue;
11 }
12 </style>
13
14 <body>
15 <h1>標題1</h1>
16 <h2>標題2</h2>
17 <p>這是一個美好的春天</p>
18 <p>一起去吹風</p>
19 <button>切換顏色</button>
20 </body>
第04行使用toggleClass()方法設置3個元素的顏色為blue。單擊頁面中的“切換顏色”按鈕，效果如圖4.3所示。再次單擊該按鈕，頁面恢復默認效果，如圖4.4所示。
圖4.3 單擊后出現的顏色
圖4.4 再次單擊出現的顏色
推薦閱讀
- Learning LibGDX Game Development（Second Edition）
- Mastering Entity Framework Core 2.0
- 我的第一本算法書
- Visual C++串口通信技術詳解（第2版）
- JS全書：JavaScript Web前端開發指南
- Unity Shader入門精要
- Mastering Drupal 8 Views
- Learning Unity 2D Game Development by Example
- Clojure for Machine Learning
- Python程序設計開發寶典
- Visual Basic程序設計全程指南
- C語言從入門到精通
- Python機器學習開發實戰
- Python深度學習（第2版）
- Roslyn Cookbook