使一个 div 可见而另一个不可见

Posted 2023-02-21

【中文标题】使一个 div 可见而另一个不可见

【英文标题】：Make one div visible and another invisible

【发布时间】：2011-05-04 08:04:05

【问题描述】：

我有两个 div 标签，一个用于搜索，另一个用于结果。我需要的是，当单击提交按钮时，将返回结果并将其放入结果 div（带有 iframe）中，并且搜索 div 应该被隐藏并且结果 div 应该是可见的。

搜索 div 最初设置为可见（使用可见性变为可见），结果 div 最初设置为隐藏（使用可见性变为隐藏）。

另外，最初隐藏的div所在的页面底部有一个巨大的空白，那么我如何确保底部也没有多余的空白。

【参考方案1】：

可以使用 style 的 display 属性。最初将结果部分样式设置为

style = "display:none"

那么 div 将不可见，也不会有任何空白。

在填充搜索结果后，使用 java 脚本更改显示属性，如

document.getElementById("someObj").style.display = "block"

使用java脚本可以让div不可见

document.getElementById("someObj").style.display = "none"

【参考方案2】：

通过可见性使其不可见仍然会占用空间。而是尝试将显示设置为无以使其不可见，然后将显示设置为阻止以使其可见。

【讨论】：

如果我错了，请纠正我，但是对于 iFrame，您必须使其可见并显示，否则出于安全原因，某些浏览器不会加载内容。但是，您可以将其设置为 1x1px 和不透明度 0.01%。我以前使用跨站点上传小部件遇到过这个问题。

【参考方案3】：

我不认为你真的想要 iframe，是吗？

除非您做一些奇怪的事情，否则您应该以 JSON 或（在最坏的情况下）XML 的形式返回结果，对吗？

对于您的白盒/额外空间问题，请尝试

style="display: none;"

而不是

style="visibility: hidden;"

【讨论】：

是的，其实我有，我不想要，但客户需要它

【参考方案4】：

如果您想使用 display=block 它会使内容阅读器跳转，因此您可以将 left 属性设置为负值，而不是使用 display ，该值在要显示的 html 页面中不存在，但实际上它确实存在。

我希望你一定明白我的意思，如果我不能让你明白，你可以给我回消息。