js中怎麼進行按鈕切換變色並切換內容

2019-12-11 23:11:32

現在智慧手機已經普及了，在手機中進行各種設定，總是有點一下就開啟，在點一下就關閉這樣的按鈕，那麼在網頁中要如何實現呢？

本文就以js + css + 圖片為例介紹如何實現這種效果

建立如下結構的測試頁面

-- JqueryButton

-- Content

-- Images

-- btn-choose.png

-- Scripts

-- jquery-1.11.3.min.js

-- JqueryButton.html

在頁面中新增dom結構

1）引入jquery原始檔

2）新增一個div用於放置選擇的圖片

3）新增另外一個div用於放置選擇與關閉時的內容

在頁面新增css樣式，用於控制圖片與dom內容

選擇頁面使用瀏覽器開啟，此時執行效果如下，由於還沒有新增點選事件，所以圖片點選是沒有效果的

在頁面新增js，用於處理點選事件

1）當前如果是開啟狀態，就切換為關閉狀態，同時，顯示關閉對應的內容，隱藏開啟對應的文字內容

2）如果當前是關閉狀態，就切換為開啟狀態，同時，顯示開啟對應的內容，隱藏關閉對應的文字內容

在瀏覽器中執行效果如下

1）預設是開啟狀態，顯示開啟對應的文字內容

2）當點選按鈕時，將切換為關閉狀態，顯示關閉對應的內容

總結

1）使用css控制顯示圖片的哪一部分

2）使用jquery系結圖片的點選事件，實現內容的切換