問題描述

公司要做個活動頁，4個按鈕，點擊按鈕的時候，就相當于選中狀態，更換背景圖片。

點擊下一個的時候，如何讓上一個恢復到原來的狀態。

問題解答

按鈕圖片寫進background-image里，選中的就加class覆蓋圖片

這個編輯工具，我猜可能是dw。。。然后這代碼也是透露著一股小清新的氣息。首先我跟你講，寫切換不是你這樣寫的，這種寫法只有少部分修魔的才會這樣寫，不拘一格。我們修仙的一般都會通過修改class來達到目的。簡單點的寫法:

<p class='item'> <img src='http://m.4tl426be.cn/wenda/unchoose.png' > <img src='http://m.4tl426be.cn/wenda/choose.png' class='choImg'></p><style>.choImg{ display : none;}.choose .unchoImg{ display : none;}.choose .choImg{ display : block;}</style>

這時我們通過js操作 “choose” 這個class名就可以達到相應的目的了。

首先你這個IMG都沒有ID你這里寫這個ID干嘛，要用ID控制的話先把ID加上去吧…………然后你可以弄兩個按鈕的樣式，一個選中的一個未選中的。然后用js控制點擊一個按鈕時將這個按鈕的CSS添加選中的樣式，再清掉其他按鈕的選中樣式就可以了。

css:

.btn { background-image:url(default);}.btn.sel { background-image:url(sel.png);}

javascript:

//step1 清除所有含有sel按鈕的sel樣式 $(’.btn.sel’).removeClass(’sel’);//step2 給當前觸發事件的btn增加sel樣式 $(this).addClass(’sel’)