Question

我有一个带有基本标签控件的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中试过这个。

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

Answer 1

这是因为CSS属性'visibility'是继承的，但不会影响页面的布局。因此，如果您将要隐藏的元素设置为其所有子元素，除非您明确地将它们设为可见（通过指定visibility: visible就是这种情况）。

您必须重置要继承的CSS属性才能获得所需的行为。您可以使用inherit关键字作为值visibility: inherit

来执行此操作

编辑或者，作为Javascript：

element.style.visiblity = 'inherit';

Answer 2

我认为您的示例已经过简化，在您的实际代码中，您有多个标签。在这种情况下，我很惊讶发布的答案为你工作。当你返回tab1时，你不想保留tc1的可见性吗？如果你这样做，那么坚持原来的想法，但修改标签功能，如下所示：

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

请注意，我正在修改父div的显示属性 - 而不是可见性属性。

Answer 3

不是将子元素的可见性设置为“可见”，而是将其设置为“继承” - 然后它将遵循其父级可见性设置，而不是单独覆盖它。

CSS样式可见性不符合预期

3 个答案: