您如何摆脱在 <div> 单击时弹出的随机“按下”类？

Posted 2023-03-07

【中文标题】您如何摆脱在 <div> 单击时弹出的随机“按下”类？

【英文标题】：How do you get rid of a random "pressed" class popping up on <div> click?

【发布时间】：2015-07-13 03:01:52

【问题描述】：

我目前有一个 div，我正试图将它制作成一个like 按钮，当点击它时它会切换到另一个图像并在再次点击时再次返回.....

因此，我遇到了一个问题，每次单击 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');
);

【问题讨论】：

当我将其更改为 .active 时，第二张图片不再显示。

【参考方案1】：

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

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

您可以在此处查看演示：https://jsfiddle.net/k135g025/

希望这会有所帮助！

【讨论】：

我认为我们已经完成了 95%！这很好用，唯一的问题是每次单击按钮时按钮都会重新加载整个页面。有什么解决办法吗？

太棒了~确保按钮没有任何 链接，否则我不明白为什么这会根据您当前的代码触发页面重新加载。

想通了，你必须添加 type="button" 并且它工作完美！谢谢您的帮助！

【参考方案2】：

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

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

【讨论】：

我做了这两项更改，但现在第二张图片根本没有显示。 “按下”类仅在我按下 div 时出现，但当我放手时，“按下”类消失。会不会是个问题？

参见this demo，我在div.like_button 中添加了“LIKE”一词，在.like_button.active 中添加了color: red; 以显示差异。让我知道它是如何为你工作的；）

可能是因为您在谈论“按下”类，但在您的代码中，该类被命名为“活动”。

它在 jsfiddle 中有效，但在我的网站上无效，即使我完全复制它。这是我仅在按下按钮时显示的代码。 LIKE