0

我目前有一个 div，我正试图将其制作成一个类似的按钮，当单击它时它会切换到另一个图像，然后再次单击时又会返回.....

我遇到了一个问题，每次单击 div 图像时，它都会添加一个名为“pressed”的类，而第二个图像只会保留到我将手指从左键上移开。

我正在使用 phonegap 和英特尔移动框架来帮助处理 html、css 和 javascript。

有没有办法禁止这个功能在点击时弹出，或者我有什么办法可以用更简单的方法让两张图片在点击时交换？

谢谢您的帮助。我对此有点陌生。

HTML

<td align="right">
   <div class="like_button"></div>
</td>

CSS

    .like_button {
    background-color: transparent;
    border-color: transparent;
    border:0px;
    background-image: url(../img/like_button.png);
    background-size: 52px 52px;
    height: 52px;
    width: 52px;
}

    .like_button:active {
    background-image: url(../img/liked_button.png);
    background-size: 52px 52px;
    height: 52px;
    width: 52px;
}

JAVASCRIPT

jQuery('like_button').click(function(){
   jQuery(this).toggleClass('active');
});
4

2 回答 2

2

就像lmgonzalves在评论中所说的那样，我认为问题与:active伪选择器有关，伪选择器主要用于在元素被激活（被单击或以其他方式激活）时更改元素的状态，因此您正在经历瞬间效果当你抬起手指时。

相反，您应该删除伪选择器并使用简单的类选择器.like_button.clicked，例如处理状态更改 CSS。

你可以在这里看到演示：https ://jsfiddle.net/k135g025/

希望这可以帮助！

于 2015-07-13T03:50:49.620 回答
1

您需要在 CSS中更改.like_button:active为。.like_button.active

并且也jQuery('like_button')应该jQuery('.like_button')在 jQuery 代码中。

于 2015-07-13T03:11:19.310 回答