js中怎么進行按鈕切換變色并切換內容
此刻智妙手機已經普及了，在手機中進行各類設置，老是有點一下就打開，在點一下就封閉如許的按鈕，那么在網頁中要若何實現呢？
本文就以js + css + 圖片為例介紹若何實現這種結果
方式/步調
- 1
建立如下布局的測試頁面
-- JqueryButton
-- Content
-- Images
-- btn-choose.png
-- Scripts
-- 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綁心猿意馬圖片的點擊事務，實現內容的切換
- 發表于 2018-11-15 00:00
- 閱讀 ( 714 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章