gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 04:25:26 30 4
gpt4 key购买 nike

我有一个带有基本选项卡控件的 html 页面。我使用 javascript 来显示和隐藏选项卡和选项卡内容 div。我的问题是,如果我将其中一个选项卡内容 div 中某个元素的可见性更改为“隐藏”,然后再更改为“可见”,该元素似乎忘记或丢失了其父 div 容器并保持可见,无论其原始内容如何 parent 可见度。

为了说明,请看下面的例子:

<!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',但不影响页面的布局。因此,如果您将一个元素设置为隐藏,则其所有子元素都将隐藏,除非您明确地使它们可见(通过指定 visibility: visible 就是这种情况)。

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

编辑 或者,作为 Javascript:

element.style.visiblity = 'inherit';

关于javascript - CSS 样式可见性未按预期运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2112710/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com