問(wèn)題描述

公司要做個(gè)活動(dòng)頁(yè)，4個(gè)按鈕，點(diǎn)擊按鈕的時(shí)候，就相當(dāng)于選中狀態(tài)，更換背景圖片。

點(diǎn)擊下一個(gè)的時(shí)候，如何讓上一個(gè)恢復(fù)到原來(lái)的狀態(tài)。

問(wèn)題解答

按鈕圖片寫進(jìn)background-image里，選中的就加class覆蓋圖片

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

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

這時(shí)我們通過(guò)js操作 “choose” 這個(gè)class名就可以達(dá)到相應(yīng)的目的了。

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

css:

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

javascript:

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