Javascript类更改onClick重新定位图像

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

.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”（仅当鼠标仍在点击时适用）。我需要更改图像，并且可能会使用“：visted”伪元素（这就是所谓的吗？）使票据在被访问后保持撕裂状态

我的问题是：Javascript似乎运行正常，只是当我单击链接时，我的链接从导航栏中的浮动位置移动到页面顶部附近的某个随机位置（看似但实际上并非如此）

这似乎是脚本忽略了我的CSS一旦点击。。。我错过了什么

我是否需要为“new”类指定一组新的规则，或者复制它们？Javascript实际上会改变整个元素吗？我讨厌JS，但我对CSS有着非常坚定的理解

---

提前谢谢

两个面板上都需要

float:left

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

---

不会添加

float:left到你的。在类上解决此问题？