此刻智妙手機已經普及了 ， 在手機中進行各類設置 ， 老是有點一下就打開 ， 在點一下就封閉如許的按鈕 ， 那么在網頁中要若何實現呢？
本文就以js + css + 圖片為例介紹若何實現這種結果
方式/
1建立如下布局的測試頁面
-- JqueryButton
-- Content
-- Images
-- btn-choose.png
-- Scripts
【js中怎么進行按鈕切換變色并切換內容】 -- jquery-1.11.3.min.js
-- JqueryButton.html
2在頁面中添加dom布局
1）引入jquery源文件
2）添加一個div用于放置選擇的圖片
3）添加別的一個div用于放置選擇與封閉時的內容
3在頁面添加css樣式 ， 用于節制圖片與dom內容
4選擇頁面利用瀏覽器打開 ， 此時運行結果如下 ， 因為還沒有添加點擊事務 ， 所以圖片點擊是沒有用果的
5在頁面添加js ， 用于處置點擊事務
1）當前若是是打開狀況 ， 就切換為封閉狀況 ， 同時 ， 顯示封閉對應的內容 ， 埋沒打開對應的文字內容
2）若是當前是封閉狀況 ， 就切換為打開狀況 ， 同時 ， 顯示打開對應的內容 ， 埋沒封閉對應的文字內容
6在瀏覽器中運行結果如下
1）默認是打開狀況 ， 顯示打開對應的文字內容
2）當點擊按鈕時 ， 將切換為封閉狀況 ， 顯示封閉對應的內容
7總結
1）利用css節制顯示圖片的哪一部門
2）利用jquery綁定圖片的點擊事務 ， 實現內容的切換
猜你喜歡
- 12306怎么添加乘車人
- 支付寶怎么開通商家信用分
- WPS excel表格同時滿足多個條件公式怎么表達
- 怎么查看win10系統版本
- 固態硬盤怎么區分好壞
- ET打版教程——端移動1
- Win10怎么默認用Windows照片查看程序打開圖片
- 像素射擊手游怎么更換人物皮膚
- 手機號碼被別人注冊了12306怎么辦
- 手機能連接上wifi但不能上網怎么辦