jquery - 单击按钮以更改按钮背景图像

标签 jquery html css

<分区>

我有一个带有背景图片的按钮。

HTML

<input name="" type="button" value=" " style="background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png)
 no-repeat center; width:13px; height:11px; border:none;">

js Fiddle link

我想补充的是,当我单击按钮时,背景图像应该改变并变成另一个图像(深色图像)。这是 link该图像应替换为什么。然后再次单击 Dark image 回到 light image 。

我想知道他有可能吗?我不知道该怎么做。如果能做到这一点那就太好了。

最佳答案

$('input:button').on('click',function(){
 $(this).css('background-image','url(http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png)');
})

演示 --> http://jsfiddle.net/eCkGQ/5/

更新:

切换图像

CSS:

.light{
  background:url('http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png') no-repeat center;
}

.dark{
  background:url('http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png') no-repeat center;
}

HTML:

<input class='light' name="" type="button" value=" " style="width:13px; height:11px; border:none;">

Js:

$('input:button').on('click', function () {
    $(this).toggleClass('dark light');
});

演示 --> http://jsfiddle.net/eCkGQ/14/

关于jquery - 单击按钮以更改按钮背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16714558/

上一篇:jquery - 如何定位 $(this) 的第 n 个 child

下一篇:javascript - HTML、JavaScript 和 CSS 中的自定义弹出框

相关文章:

javascript - AJAX 使用 PHP 从 POST 获取数据

javascript - 如何通过在JavaScript中构造AudioBuffer来正确播放WAV文件?

Javascript - 鼠标事件和 float 元素问题

javascript - css动画定时/缓动功能仅在第一次有效

javascript - 当 url 包含空格时, Angular ng 样式背景图像

jquery - 如何将 STRUCT - OR - JSON 传递给 Coldfusion CFC 方法

jquery - 如何防止 jquery ajax 对数据参数上的某些字符进行编码?

jquery - Angular ng-hide'ing 对于动画来说太快了

javascript - 我怎样才能在这个购物车php中插入数量

html - 单击一个框架中的链接并在另一个框架中显示 JSP