我正在使用一个简单的样式规则:
.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 的掌握非常牢固。
最佳答案
两者都需要 float:left
。
.off { float: left; background: url(image.png); }
.on { float: left; background: url(different_image.png); }
关于JavaScript 类更改 onClick 重新定位图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11712311/