javascript - 关于单选框的问题,小白一枚,希望有人帮帮忙
PHP中文网
PHP中文网 2017-05-24 11:36:42
[HTML讨论组]

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

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

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(4)
巴扎黑

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

仅有的幸福

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

<p class="item">
    <img src="unchoose.png" class="unchoImg" >
    <img src="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')
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号