顯示：無/元素的阻止在Firefox中有效，在Safari或Chrome中不適用

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");