Html 使一个 div 可见,另一个不可见

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4084674/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:05:24  来源:igfitidea点击:

Make one div visible and another invisible

csshtmlvisibilityhidden

提问by mattgcon

I have two div tags, one is for the search and the other is for the results. What I need is for when the submit button is clicked the results are returned and placed into the results div (with an iframe) and the search div should become hidden and the results div should be made visible.

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

search div is initially set to visible (using the visibility to visible) and the results div is initially set to hidden (using the visibility to hidden).

搜索 div 最初设置为可见(使用可见性),结果 div 最初设置为隐藏(使用可见性隐藏)。

Also, initially ther eis a huge white space at the bottom of the page where the hidden div is, so how do I make sure there is no extra white space at the bottom too.

此外,最初隐藏 div 所在的页面底部有一个巨大的空白区域,所以我如何确保底部也没有多余的空白区域。

采纳答案by My Other Me

Making it invisible with visibility still makes it use up space. Rather try set the display to none to make it invisible, and then set the display to block to make it visible.

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

回答by Sujith

You can use the display property of style. Intialy set the result section style as

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

style = "display:none"

Then the div will not be visible and there won't be any white space.

然后 div 将不可见,也不会有任何空白。

Once the search results are being populated change the display property using the java script like

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

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

Using java script you can make the div invisible

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

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

回答by CoolAJ86

I don't think that you really want an iframe, do you?

我不认为你真的想要一个 iframe,是吗?

Unless you're doing something weird, you should be getting your results back as JSON or (in the worst case) XML, right?

除非您做一些奇怪的事情,否则您应该将结果作为 JSON 或(在最坏的情况下)XML 返回,对吗?

For your white box / extra space issue, try

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

style="display: none;"

instead of

代替

style="visibility: hidden;"

回答by Prateek

If u want to use display=block it will make the content reader jump, so instead of using display you can set the left attribute to a negative value which does not exist in your html page to be displayed but actually it do.

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

I hope you must be understanding my point, if I am unable to make u understand u can message me back.

我希望你一定能理解我的观点,如果我无法让你理解你可以给我回消息。