Javascript CSS样式可见性未按预期运行_Javascript_Css_Dom_Visibility

Javascript CSS样式可见性未按预期运行

javascript css dom

Javascript CSS样式可见性未按预期运行,javascript,css,dom,visibility,Javascript,Css,Dom,Visibility,我有一个带有基本选项卡控件的html页面。我使用javascript显示和隐藏选项卡和选项卡内容div。我的问题是，如果我将其中一个选项卡内容div中的元素的可见性更改为“隐藏”，然后返回到“可见”，则该元素似乎忘记或丢失了其父div容器，并保持可见，而不管其原始父级可见性如何要进行说明，请以以下示例为例： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/h

我有一个带有基本选项卡控件的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>


函数hideTab（）{
document.getElementById（'tab1'）。style.visibility='hidden'
}
函数showTab（）{
document.getElementById（'tab1'）。style.visibility='visible'
}
函数hideContent（）{
document.getElementById（'tc1'）。style.visibility='hidden'
}
函数showContent（）{
document.getElementById（'tc1'）。style.visibility='visible'
}









内容文本

在IE8中，单击“隐藏选项卡”，然后单击“显示选项卡”，这样可以正常工作。在显示选项卡的情况下，单击“隐藏内容”，然后单击“显示内容”，这也是正确的。现在再次单击“隐藏选项卡”，您应该会看到选项卡消失，但内容仍然不正确

在IE8中，当我使用兼容模式时，问题就消失了。另外，我注意到，如果删除DOCTYPE元素，就无法复制该问题

在Chrome（我个人最喜欢的浏览器）中，无论DOCTYPE元素是什么，问题都会持续存在。我还没有在firefox中尝试过这个

我相信这种行为有一个很好的理由，我也相信会有一个简单的解决方案让我的标签正常工作。我期待着您的评论

不要将子元素的可见性设置为“visible”，而是将其设置为“inherit”--然后它将遵循其父元素的可见性设置，而不是独立地重写它。

这是因为CSS属性“visibility”是继承的，但不会影响页面的布局。因此，如果将一个元素设置为隐藏，则其所有子元素都将隐藏，除非您显式地使它们可见（这种情况是通过指定

可见性：可见

）

必须重置要继承的CSS属性才能获得所需的行为。您可以使用

inherit

关键字作为值：

visibility:inherit

编辑或作为Javascript：

element.style.visiblity = 'inherit';

我假设您的示例已简化，并且在实际代码中有多个选项卡。在这种情况下，我很惊讶贴出的答案对你有用。您不想在返回到tab1时保留tc1的可见性吗？如果您这样做，则坚持您的原始想法，但修改选项卡功能，如图所示：

function hideTab(){
    document.getElementById('tab1').style.display = 'none'
}
function showTab(){
    document.getElementById('tab1').style.display = 'block'
}

请注意，我正在修改父div上的display属性，而不是visibility属性