CSS样式可见性没有像预期的那样运行

问题描述：

我有一个带有基本选项卡控件的html页面。我使用JavaScript来显示和隐藏标签和标签内容div。我的问题是，如果我将其中一个标签内容div内的某个元素的可见性更改为'hidden'，然后回到'visible'，该元素似乎会忘记或丢失其父容器并保持可见状态，而不管它的原始内容家长知名度。CSS样式可见性没有像预期的那样运行

为了说明，看看下面的例子：

<!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中。

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

答

这是因为CSS属性“可见性”是继承的，但不影响页面的布局。因此，如果您设置要隐藏的元素，除非您明确地使其可见（指定visibility: visible）。

，必须重置CSS属性继承得到你想要的行为。 visibility: inherit

编辑或者，如JavaScript：您可以通过使用inherit关键字的值这么做

element.style.visiblity = 'inherit';

zneak - 非常感谢，这解决了我的问题。正如您所建议的那样，我在将每个元素设置为“继承”后，将其更改为“可见”，并且问题得到解决。谢谢。 – SausageFingers 2010-01-21 22:04:48

答

相反的子元素的可见性设置为“可见”，它设置为“继承” - 那么它会听从父母的可见性设置独立覆盖它来代替。

答

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

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

注意，我修改父DIV显示属性 - 不可见性属性。

CSS样式可见性没有像预期的那样运行

相关推荐