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似乎运行正常，但是当我点击链接时，我的链接从导航栏中的浮动位置移动到靠近顶部的一些（看似但实际上不是）随机位置我的页面。

一旦点击它，脚本似乎忽略了我的CSS ...我错过了什么？

我是否需要为“新”类指定一组新规则或复制它们？ Javascript实际上是否完全改变了元素？我厌倦了JS，但我对CSS很有把握。

提前致谢！

Answer 1

两者都需要float:left。

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