Javascript IE 與 Firefox style.visibility 實現

Question

我確信這對我來說是一個糟糕的疏忽，但我希望有人能解釋使用.style.visibility/ .style.display 的正確方法，這種方法適用於 IE 和 Firefox。

基本上，我有一個自定義選項卡控件。 第一個選項卡中有一個自定義 MP3 播放器控件。 當用戶點擊不同的標簽時，音樂需要繼續播放，即使它不再可見。

在 IE 中，這可以像宣傳的那樣工作，但在 Firefox 中，當用戶單擊另一個選項卡時，音樂停止並且控件重置為其初始化的 state。

//<summary>
// Display or hide relevent div areas.
//</summary>
//<param name="divId">The id of the viewable div</param>
function toggleDiv(divId) {
    var elems = new Array("0", "1", "2", "3");
    var hdnView = document.getElementById('<%=hdnCurrentDiv.ClientID %>');

    for (div in elems) {
        var elem = document.getElementById(div);

        if (div == divId) {
            elem.style.display = 'block';
            elem.style.visibility = 'visible';
            hdnView.value = divId;
            //highlightSelection(elem);
        }
        else {
            elem.style.display = 'none';
            elem.style.visibility = 'hidden';
        }
    }
}

如何讓 Firefox 表現得像 IE，因為當用戶單擊選項卡時，先前選擇的選項卡上的播放器繼續播放並且只是使該 div 不可見？

Answer 1

您可以將每個選項卡的背景設置為非透明顏色，而不是顯示/隱藏，position 將它們完全重疊並更改它們的 z-index 以將單擊的選項卡帶到堆棧的頂部。

這樣，您就不會遇到元素被破壞/重置的問題。 而且您不必在每次單擊不同的選項卡時更改定位。 你要做的就是改變z-index ...

快速示例：

<html>
<head>
    <style>
    ul
    {
        list-style: none;
    }
    li
    {
        display: inline;
    }
    #Tab1, #Tab2
    {
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    </style>
    <script>
    function toggleTab( tabID )
    {
        for( var i = 1; i<= 2; i++ )
        {
            var id = "Tab" + i;
            if( id != tabID )
            {
                document.getElementById(id).style.zIndex = "1";
            }
        }

        document.getElementById(tabID).style.zIndex = "2";
    }
    </script>
</head>
<body>
    <ul>
        <li>
            <a href="javascript:toggleTab('Tab1');">Link 1</a>
        </li>
        <li>
            <a href="javascript:toggleTab('Tab2');">Link 2</a>
        </li>
    </ul>
    <div style="position: relative;" id="allTabs">
        <div id="Tab1">
            Tab 1...
        </div>
        <div id="Tab2">
            Tab 2...
        </div>
    </div>
</body>
</html>

Answer 2

如果設置display = 'none' ， firefox 會破壞音樂播放器。 您的替代選擇是：

只需設置visibility = 'hidden';
Position 元素絕對並將其移動到遠處而不是隱藏（-10000，-10000 是一個很好的起點）

Answer 3

是的，

display=none 將從文檔中刪除元素和所有子元素

visibility=hidden 元素和children是不可見的，但是該元素存在於頁面中並且占用空間

您可以將可見性設置為隱藏，將寬度和高度設置為 1px 或 position 離開頁面某處，作為半顯示無。

Javascript IE 與 Firefox style.visibility 實現

問題描述

3 個解決方案

解決方案1
2 已采納 2011-07-20 14:20:18

解決方案2
1 2011-07-20 14:17:36

解決方案3
0 2011-07-20 19:57:10

Javascript IE 與 Firefox style.visibility 實現

問題描述

3 個解決方案

解決方案1 2 已采納 2011-07-20 14:20:18

解決方案2 1 2011-07-20 14:17:36

解決方案3 0 2011-07-20 19:57:10

解決方案1
2 已采納 2011-07-20 14:20:18

解決方案2
1 2011-07-20 14:17:36

解決方案3
0 2011-07-20 19:57:10