首頁 > 網際網路

jquery如何實現點選增加樣式,點選移除樣式

2019-12-12 19:43:42

在jquery中,實現點選增加樣式,再次點選移除樣式,可以通過toggleClass()切換樣式方法來實現。下面舉例講解jquery如何實現點選增加樣式,點選移除樣式。

1

新建一個html檔案,命名為test.html,同時載入jquery.min.js檔案,用於講解jquery如何實現點選增加樣式,點選移除樣式。


2

在test.html檔案內,使用p標籤建立一行文字,用於點選按鈕時,更改其樣式進行顯示。


3

在test.html檔案內,使用button標籤建立一個按鈕,設定其class屬性為btn1,用於下面對其系結點選事件。


4

在test.html檔案內,使用css定義一個main類名的樣式,設定其樣式為文字大小為原來的樣式的120%,字型顏色為紅色。


5

在test.html檔案內,使用jquery給button按鈕系結點選事件,程式碼如下:


6

在test.html檔案內,使用toggleClass()方法給p標籤文字新增類樣式,當點選按鈕時,給p標籤文字增加main樣式,再次點選按鈕時移除p標籤的main樣式。


7

在瀏覽器開啟test.html檔案,點選測試實現的效果。





IT145.com E-mail:sddin#qq.com