Sau*_*ers 7 javascript css dom visibility
我有一个带有基本选项卡控件的html页面.我使用javascript来显示和隐藏标签和标签内容div.我的问题是,如果我将其中一个标签内容div中的元素的可见性更改为"隐藏",然后返回"可见",该元素似乎忘记或丢失其父div容器并保持可见,无论其原始父母知名度.
为了说明,请采用以下示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function hideTab(){
document.getElementById('tab1').style.visibility = 'hidden'
}
function showTab(){
document.getElementById('tab1').style.visibility = 'visible'
}
function hideContent(){
document.getElementById('tc1').style.visibility = 'hidden'
}
function showContent(){
document.getElementById('tc1').style.visibility = 'visible'
}
</script>
</head>
<body>
<a href="javascript: hideTab()">Hide Tab</a><br />
<a href="javascript: showTab()">Show Tab</a><br />
<a href="javascript: hideContent()">Hide Content</a><br />
<a href="javascript: showContent()">Show Content</a><br /><br />
<div id="tab1" style="background:yellow;width:100px">
<div id='tc1'>Content Text</div>
</div>
</body>
</html>
在IE8中单击"隐藏选项卡",然后单击"显示选项卡",这样就可以了.显示选项卡后单击"隐藏内容",然后单击"显示内容"这也是正确的.现在再次单击"隐藏选项卡",您应该看到选项卡消失,但内容不正确.
在IE8中,当我使用兼容模式时问题消失.另外,我注意到如果我删除DOCTYPE元素,我无法复制问题.
在Chrome(我个人最喜欢的)中,无论DOCTYPE元素如何,问题都是持久的.我没有在firefox中试过这个.
我确信这种行为有一个很好的理由,我也相信我会有一个简单的解决方案让我的标签正常工作.我期待你的评论.
zne*_*eak 17
这是因为CSS属性"visibility"是继承的,但不会影响页面的布局.因此,如果您将一个元素设置为隐藏,那么它的所有子元素都将是,除非您明确地使它们可见(通过指定就是这种情况visibility: visible).
您必须重置要继承的CSS属性才能获得所需的行为.您可以使用inherit关键字作为值来执行此操作:visibility: inherit
编辑或,作为Javascript:
element.style.visiblity = 'inherit';