Javascript IE与Firefox风格的可见性实现
我肯定这是我的疏忽，但我希望有人能解释一下使用.style.visibility/.style.display的正确方法，这种方法在IE和Firefox中都能使用 基本上，我有一个自定义选项卡控件。第一个选项卡中有一个自定义MP3播放器控件。当用户单击其他选项卡时，音乐需要继续播放，即使它不再可见 在IE中，这与广告中的一样有效，但在Firefox中，当用户单击另一个选项卡时，音乐停止，控件重置为其初始化状态Javascript IE与Firefox风格的可见性实现,javascript,stylesheet,Javascript,Stylesheet,我肯定这是我的疏忽，但我希望有人能解释一下使用.style.visibility/.style.display的正确方法，这种方法在IE和Firefox中都能使用 基本上，我有一个自定义选项卡控件。第一个选项卡中有一个自定义MP3播放器控件。当用户单击其他选项卡时，音乐需要继续播放，即使它不再可见 在IE中，这与广告中的一样有效，但在Firefox中，当用户单击另一个选项卡时，音乐停止，控件重置为其初始化状态 //<summary> // Display or hide releve
//<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';
}
}
}
//
//显示或隐藏相关div区域。
//
//可视div的id
函数切换div（divId）{
变量元素=新数组（“0”、“1”、“2”、“3”）；
var hdnView=document.getElementById（“”）；
用于（要素中的div）{
var elem=document.getElementById（div）；
if（div==divId）{
elem.style.display='block'；
elem.style.visibility='visible'；
hdnView.value=divId；
//高亮度选择（elem）；
}
否则{
elem.style.display='none'；
elem.style.visibility='hidden'；
}
}
}
如何让Firefox表现得像IE一样，当用户单击选项卡时，先前选择的选项卡上的播放器继续播放，只是使该div不可见？如果设置
display='none'- 只需设置
visibility='hidden' - 定位绝对元素并将其移动到很远的地方，而不是隐藏（-10000，-10000是一个很好的起点）
display='none'- 只需设置
visibility='hidden' - 定位绝对元素并将其移动到很远的地方，而不是隐藏（-10000，-10000是一个很好的起点）
<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>
保险商实验室
{
列表样式：无；
}
锂
{
显示：内联；
}
#表1，表2
{
背景色：#fff；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
功能切换选项卡（选项卡ID）
{
对于（var i=1；i，您可以将每个选项卡的背景设置为不透明颜色，将它们绝对放置在彼此的顶部，并更改它们的z索引以将单击的选项卡置于堆栈的顶部，而不是显示/隐藏
这样，您就不会遇到元素被销毁/重置的问题。而且您也不必每次单击不同的选项卡时都更改位置。您所做的只是更改z索引
快速示例：
<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>
保险商实验室
{
列表样式：无；
}
锂
{
显示：内联；
}
#表1，表2
{
背景色：#fff；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
功能切换选项卡（选项卡ID）
{
对于（var i=1；iYes
display=none将从文档中删除元素和所有子元素
可见性=隐藏元素和子元素不可见，但元素存在于页面上并占用空间
您可以将“可见性”设置为“隐藏”，将“宽度”和“高度”设置为1px，或将页面的某个位置设置为“半显示无”。是
display=none将从文档中删除元素和所有子元素
可见性=隐藏元素和子元素不可见，但元素存在于页面上并占用空间
您可以将“可见性”设置为“隐藏”，将“宽度和高度”设置为1px，或将其放置在页面之外的某个位置，作为“半显示无”。具有id为“code>0”的div
etc是一个非常糟糕的想法。这与我的问题无关。这就是为什么它是一个注释而不是答案。这仍然是一个非常糟糕的想法。感谢您没有将任何内容带到表中。您意识到DOM中的ID是全局变量。这意味着您添加了窗口[0]
，窗口[1]
etc进入全局范围。这是一种获得真正讨厌的bug的好方法。具有id为“0”的div
etc是一个非常糟糕的想法。这与我的问题无关。这就是为什么它是一个注释而不是答案。这仍然是一个非常糟糕的想法。感谢您没有将任何内容带到表中。您意识到DOM中的ID是全局变量。这意味着您添加了窗口[0]
，窗口[1]
etc进入全局范围。这是一个很好的方法来获取真正讨厌的bug。我想你的意思是display:none
，而不是display='block'
。我想你的意思是display:none
，而不是display='block'
。