Question

我确信这对我来说是一个糟糕的疏忽，但我希望有人可以解释使用 .style.visibility / .style.display的正确方法。 IE和Firefox都有。

基本上，我有一个自定义标签控件。第一个标签中有一个自定义MP3播放器控件。当用户点击其他标签时，音乐需要继续播放，即使它不再可见。

在IE中，这可以像宣传的那样工作，但在Firefox中，当用户点击另一个选项卡时，音乐停止并且控件重置为其初始化状态。

//<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

除了显示/隐藏之外，您可以将每个标签的背景设置为不透明的颜色，将它们绝对地放在彼此的顶部，并更改它们的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';
将元素置于绝对位置并将其移至远处而不是隐藏（-10000，-10000是一个好的起点）

Answer 3

是，

display = none将从文档中删除元素和所有子元素

visibility = hidden元素和子元素是不可见的，但元素存在于页面上并占用空间

你可以设置隐藏的可见性，将宽度和高度设置为1px或将页面放置在某个位置，作为半显示无。

Javascript IE与Firefox style.visibility实现

3 个答案: