JavaScript 类更改 onClick 重新定位图像

Question

我正在使用一个简单的样式规则:

.off { float: left; background: url(image.png); }
.on { background: url(different_image.png); }

结合简单的 JavaScript 事件:

<a href="#">
<div class="off" onclick="this.className='on'; return false;">
link
</div>
</a>

为了在点击时更改导航栏中的图像。为了更深入地了解，我在链接中使用了一张“承认一张”票的图像，点击后会出现一张破票的图像。本质上，我希望在单击后撕票，而不仅仅是在“:active”时(仅在鼠标仍被单击时适用)。我需要更改图像，并且可能会使用“:visited”伪元素(这就是所谓的？)让票在访问后保持撕裂状态。

我的问题是:JavaScript 似乎运行正常，除了当我单击链接时，我的链接从它在导航栏中的 float 位置移动到靠近顶部的某个(看似，但实际上不是)随机位置我的页面。

点击后似乎脚本忽略了我的 CSS；我错过了什么？

我是否需要为"new"类指定一组新规则或复制它们？ JavaScript 真的改变了整个元素吗？我对 JS 很烂，但我对 CSS 的掌握非常牢固。

Answer 1

两者都需要 float:left。

.off { float: left; background: url(image.png); }
.on { float: left; background: url(different_image.png); }