javascript - 不在 Safari 或 Chrome 中显示 : none/block for elements works in Firefox,

Question

我是 JavaScript/CSS 新手。

我在单行表格的左侧单元格中有一个冗长的目录，用于控制右侧单元格的内容。为了减少垂直滚动，我将 ToC 分成两部分，并使用 display: block/display: none 切换它们的可见性。

这适用于 Firefox 33，但不适用于 Safari 6.2、Chrome 31.0 或 Eclipse 内置浏览器 [OSX 10.8.5]。

这是切换代码(首先是 HTML，然后是 JavaScript):

<h4>Contents: <a href='javascript:void(0)' onclick="changeToC(1);">Pages 1-12</a>
<a href='javascript:void(0)' onclick="changeToC(2);">Pages 13-24</a></h4>

function changeToC(number) {
    if (number==1) {
        document.getElementById('EiT_ToC2').style="display: none";
        document.getElementById('EiT_ToC1').style="display: block";
    } else {
        alert("trying to show ToC 2"); // DEBUG
        document.getElementById('EiT_ToC1').style="display: none";
        document.getElementById('EiT_ToC2').style="display: block";
    } // end if
} // end changeToC()

调试 alert() 按预期工作。

我的错误是什么，我该如何解决？可以接受纯 JavaScript 或 jQuery。

Answer 1

正确的语法是:

document.getElementById('EiT_ToC1').style.display = "none";

在 jquery 中:

$("#EiT_ToC1").css("display", "none");