Javascript CSS 样式可见性未按预期运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2112710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Style Visibility not behaving as expected
提问by SausageFingers
I have a html page with a basic tab control. I use javascript to show and hide tabs and tab content divs. My problem is that if I change the visibility of an element inside one of the tab content divs to 'hidden', then back to 'visible', the element seems to forget or lose its parent div container and remains visible, regardless of its original parents visibility.
我有一个带有基本选项卡控件的 html 页面。我使用 javascript 来显示和隐藏选项卡和选项卡内容 div。我的问题是，如果我将其中一个选项卡内容 div 中元素的可见性更改为“隐藏”，然后返回“可见”，则该元素似乎忘记或丢失其父 div 容器并保持可见，无论其原始内容如何父母的可见性。
To illustrate, take the following example:
为了说明，请看下面的例子：
<!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>
In IE8 click 'Hide Tab' then 'Show Tab' this works ok. With the tab shown click 'Hide Content' then 'Show Content' This is also correct. Now click 'Hide Tab' again and you should see the tab disappear but the content incorrectly remains.
在 IE8 中，单击“隐藏选项卡”，然后单击“显示选项卡”，这可以正常工作。显示选项卡后，单击“隐藏内容”，然后单击“显示内容”这也是正确的。现在再次单击“隐藏选项卡”，您应该会看到选项卡消失了，但内容错误地保留了下来。
In IE8, the problem disappears when I use compatibility mode. Also, I have noticed that if I remove DOCTYPE element, I can't replicate the problem.
在 IE8 中，当我使用兼容模式时问题消失。另外，我注意到如果我删除 DOCTYPE 元素，我将无法复制该问题。
In Chrome (my personal favourite) the problem is persistent regardless of the DOCTYPE element. I haven't tried this in firefox.
在 Chrome（我个人最喜欢的）中，无论 DOCTYPE 元素如何，问题都是持续存在的。我还没有在 Firefox 中尝试过这个。
I'm sure there is a very good reason for this behaviour, I'm also sure that there will be a simple solution for me to make my tabs work correctly. I look forward to your comments.
我确信这种行为有一个很好的理由，我也确信会有一个简单的解决方案让我的标签正常工作。我期待你的评论。
回答by zneak
This is because the CSS property 'visibility' is inherited, but does not affect the layout of the page. Therefore, if you set an element to be hidden, all its children will be, unless you explicitly make them visible (which is the case by specifying visibility: visible).
这是因为 CSS 属性 'visibility' 是继承的，但不影响页面的布局。因此，如果您将一个元素设置为隐藏，则其所有子元素都将隐藏，除非您明确使它们可见（通过指定 就是这种情况visibility: visible）。
You must reset the CSS property to be inherited to get the behavior you want. You can do so by using the inheritkeyword as the value: visibility: inherit
您必须重置要继承的 CSS 属性才能获得所需的行为。您可以通过使用inherit关键字作为值来做到这一点：visibility: inherit
EDITOr, as Javascript:
编辑或者，作为 Javascript：
element.style.visiblity = 'inherit';
回答by Lou Prado
I assume that your example is simplified, and in your actual code you have multiple tabs. In that case I am surprised the answers posted worked for you. Don't you want the visibility of tc1 preserved when you return to the tab1 ? If you do, then stick to your original idea but modify the tab functions as shown:
我假设您的示例已简化，并且在您的实际代码中您有多个选项卡。在这种情况下，我很惊讶发布的答案对您有用。当您返回 tab1 时，您不想保留 tc1 的可见性吗？如果你这样做，那么坚持你原来的想法，但修改选项卡功能，如下所示：
function hideTab(){
document.getElementById('tab1').style.display = 'none'
}
function showTab(){
document.getElementById('tab1').style.display = 'block'
}
Note that I am modifying the display property on the parent div -- not the visibility property.
请注意，我正在修改父 div 上的显示属性——而不是可见性属性。
回答by Eric Kolb
Instead of setting the child element's visibility to 'visible', set it to 'inherit' -- then it will obey its parents visibility setting instead of overriding it independently.
不是将子元素的可见性设置为“可见”，而是将其设置为“继承”——然后它将遵守其父元素的可见性设置，而不是独立覆盖它。
