首頁 > 網際網路

jquery的toggle實現點選按鈕時顯示/隱藏圖片

2019-12-11 13:39:47

下面是使用html+css+jquery來完成點選按鈕時顯示/隱藏圖片的功能,主要用到了jquery中的一個toggle()方法。


1

首先建立一個html檔案,然後在body下建立一個div,該div下只有一個button和一個img


2

然後通過style的標籤來新增css的樣式,這個css主要是用來定義div的顯示效果。比如寬、高、居中等。


3

此時通過瀏覽器執行html可以看到如下的效果。外觀上已經實現,但是因為沒有新增js或者jquery,所以沒有點選按鈕沒有效果。


4

接下來我們通過script標籤中的src屬性來引入jquery庫檔案,因為是jquery本身就是一個封裝的js,所以是用javascript的引入方式。


5

然後什麼也不說我們先來一個jquery的載入函數,這是必須的,否則有可能出錯。


6

然後通過id獲取按鈕元素,再給它繫結一個點選事件。


7

在按鈕的點選事件中,通過id獲取img元素,再呼叫toggle()方法實現對該圖片顯示/隱藏。


8

完成上面是程式碼之後,就可以實現點選按鈕顯示或者隱藏圖片了。之所以可以完成這個功能,是因為toggle預設切換hide()和show()

如果你在toggle()方法自定義多個方法,則toggle()是切換你的方法,toggle語法實際如下:

$(selector).toggle(function1(),function2(),functionN(),...)



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