0

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

.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 的掌握非常牢靠。

提前致谢！

4

1 回答 1

2

你需要float:left两者。

.off { float: left; background: url(image.png); }
.on { float: left; background: url(different_image.png); }
于 2012-07-29T19:38:29.530 回答