Question

所以，我使用这个Javascript进行隐藏 - 显示效果：

function effect(id) {
    var h = document.getElementById(id);
    h.style.display = ((h.style.display != 'none') ? 'none' : 'inline');
}

HTML：

<div class="div">
    <a href="#" onclick="effect('h');"><img src="http://i.imm.io/1jf2j.png"/></a>
    <a href="index.php" class="url" id="h">Home</a>
</div>

和CSS：

.div {
    background: #000;
}
.div .url {
    font-size: 17px;
}

您可以在这里测试（并编辑！）代码： http://codepen.io/anon/pen/dhHiw
JSFiddle不适合我。

一切都很好。除非您单击图像。它移动了1px以上。我应该使用其他图像吗？问题出在哪儿？可能的解决方案。谢谢！

Answer 1

您基本上是删除文本元素。由于<div class="div">没有设定的高度，因此它取决于其中的元素。如果未显示文本（display=none），则div将仅调整为图像。

您可以通过设置div的高度或为文本而不是visibility=hidden设置display=none来解决此问题。当它隐藏时，它仍然具有相同的尺寸，但它是不可见的。

点击时图像移动1px以上

1 个答案: