首頁 > web前端 > js教程 > 主體

jquery怎麼實作點擊修改元素類別名

WBOY
發布: 2021-11-22 17:08:42
原創
3199 人瀏覽過

jquery實作點擊修改元素類別名稱的方法:1、給元素綁定click點擊事件並指定一個事件處理函數;2、在事件處理函數中利用attr()方法來修改元素的類別名稱,語法為“$(selector).attr('class','新類別名稱');”。

jquery怎麼實作點擊修改元素類別名

本教學操作環境:windows7系統、jquery1.10.0版本、Dell G3電腦。

jquery怎麼實作點選修改元素類別名稱

#1、新建一個html頁面,檔案名稱為test.html,用於實作操作div元素的功能。在html頁面中載入jquery.min.js文件,這個文件整合了jquery的所有方法,只有成功載入該文件才能使用jquery中的方法。在html頁面新建一個div元素,並給它一個class類別名稱red。

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

jquery怎麼實作點擊修改元素類別名

2、在div元素中增加一個onclick點擊事件,當onclick點擊事件觸發時,執行change_color()方法,此方法主要用於改變div的class。

在change_color()編寫改變div元素class類別的程式碼,實作當div被點擊時,class="red" 變成class="black",實現改變類別名稱的功能。主要是透過jquery中的attr()方法實現改變class的類別名稱。

jquery怎麼實作點擊修改元素類別名

運行程式碼,在瀏覽器中查看結果:

jquery怎麼實作點擊修改元素類別名

jquery怎麼實作點擊修改元素類別名

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

相關影片教學推薦:jQuery影片教學

#

以上是jquery怎麼實作點擊修改元素類別名的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板