#我來了#如何用jquery實現點選div更換class類名

2019-12-12 12:42:59

jquery是一個JavaScript庫，其提供了很多方法用於操作HTML元素，可以非常簡便的對div元素進行操作。下面介紹如何用jquery實現點選div更換class類名。

新建一個html頁面，檔名為test.html，用於實現操作div元素的功能。

在html頁面中載入jquery.min.js檔案，這個檔案整合了jquery的所有方法，只有成功載入該檔案才能使用jquery中的方法。

在html頁面新建一個div元素，並給它一個class類名red。

為了實現點選後有明顯的效果，通過CSS定義class="red"的div的背景顏色為紅色，同時定義類名為black時，背景顏色為黑色。

在div元素中增加一個onclick點選事件，當onclick點選事件觸發時，執行change_color（）方法，此方法主要用於改變div的class。

在change_color（）編寫改變div元素class類的程式碼，實現當div被點選時，class="red" 變成class="black"，實現改變類名的功能。主要是通過jquery中的attr（）方法實現改變class的類名。

執行程式碼，在瀏覽器中檢視結果:

可見，實現了點選div更換class類名的功能。