javascript - 关于单选框的问题，小白一枚，希望有人帮帮忙

问题描述

公司要做个活动页，4个按钮，点击按钮的时候，就相当于选中状态，更换背景图片。

点击下一个的时候，如何让上一个恢复到原来的状态。

问题解答

按钮图片写进background-image里，选中的就加class覆盖图片

这个编辑工具，我猜可能是dw。。。然后这代码也是透露着一股小清新的气息。首先我跟你讲，写切换不是你这样写的，这种写法只有少部分修魔的才会这样写，不拘一格。我们修仙的一般都会通过修改class来达到目的。简单点的写法:

<p class='item'> <img src='https://www.haobala.com/wenda/unchoose.png' > <img src='https://www.haobala.com/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’)