display:none; 在浏览器中显示为“none”。

Question

这个 jsFiddle 示例 在 Google Chrome 中可以正常工作，但在 Internet Explorer 中，当关闭图标被点击时，浏览器会移除弹出元素，但结果是在浏览器窗口中显示文本“none”。请说明如何解决此问题。

<div id="popup">
    <!-- Close popup link -->
    <a href="javascript:document.getElementById('popup').style.display='none';">X</a>
</div>

- Web_Designer

---

你提到的这两个浏览器都出现了这个问题吗？ - jackJoe

在Firefox 4.0上发生了同样的事情。 - mauris

在Google Chrome中，它可以很好地工作并删除元素，而不会在浏览器中显示文本“none”。然而，在IE中，它会在浏览器窗口中显示文本“none”，同时删除元素。 - Web_Designer

奇怪的问题，确实是这样。我很想看到解释。 - kapa

你应该在问题中放置代码，以防链接失效。永远不要假设链接会永久存在。 - mithril333221

Answer 1

使用onclick作为事件处理程序，而不是href http://jsfiddle.net/AE2X3/4/

<div id="popup">
        <a href="#" onclick="document.getElementById('popup').style.display='none';return false;" id="close_popup"></a>
        <p>This is a pop-up.</p>
</div>

- amit_g

---

我接受你的答案。我现在意识到JavaScript应该放在JavaScript事件中，而href属性是用于URL的，谢谢！ - Web_Designer

Answer 2

我认为发生的情况是分配返回其结果，然后浏览器显示该结果。如果您在JavaScript末尾添加void(0)，则不会显示它。

让我补充一点，amit_g的答案比我的更正确。他正确指出这种行为应该属于OnClick处理程序，而不是href属性。

- AgentConundrum

---

+1，现在我明白了：)。这就是我喜欢这份工作的原因，每天都能学到新东西。 - kapa

Answer 3

这个有效：

<div id="popup">
        <a href="javascript:void(0);" onclick="this.parentElement.style.display='none';" id="close_popup"></a>
        <p>This is a pop-up.</p>
</div>

Demo

- Matt Ball