首頁 > 其他

利用jquery,如何實現在文字和圖片間切換顯示?

2019-12-12 13:13:08

我們在開發html時,有時需要在文字和圖片之間切換顯示,比如點選文字後,顯示圖片,點選圖片後,再切換為文字顯示。下面來看看是怎麼實現的。

1

我們建立一個div存放文字的,一個div存放圖片的。


2

接著加上一些css樣式,先設定圖片預設是隱藏的。


3

因為我們是借助jquery來操作的,所以需要先引入指令碼檔案。


4

然後新增js指令碼邏輯,先為txt的div新增事件。點選後,把自身隱藏,然後為img的div顯示出來。


5

同樣為img的div新增點選事件,也是把自身隱藏,而把文字div顯示出來。


6

執行頁面,先顯示的文字內容。我們點選這個div。


7

點選後,就切換為圖片顯示了。再點選這個圖片,會切換回去剛才的文字內容的。



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