使用JQuery隐藏div
[英]Hiding a div using JQuery
问题描述
I want to hide a div using Javascript, as soon as the page gets loaded in the browser. 
一旦页面被加载到浏览器中，我想使用Javascript隐藏div。 I am able to do that, if i use the following code : 如果我使用以下代码，我就能做到：
document.getElementById("div_id").style.display='none';
But, when i try to do the same thing using JQuery,i notice that the div is visible for a couple of seconds after page loads,and then it becomes hidden. 但是，当我尝试使用JQuery做同样的事情时，我注意到div在页面加载后几秒钟可见，然后它被隐藏了。 The JQuery code i use is 我使用的jQuery代码是
$(document).ready(function() {
$("#div_id").css('display','none');
});
The same thing happens, if i use $("#div_id").hide(); 如果我使用$("#div_id").hide();也会发生相同的事情$("#div_id").hide(); Is this because im using a library,which would slow down the process a bit,instead of directly using document.getElementById ? 这是因为即时通讯使用的是库，而不是直接使用document.getElementById，这会稍微降低速度吗？ . 。 Any way to fix this ? 有任何解决这个问题的方法吗 ？
Thank You. 谢谢。
7 个解决方案
解决方案1
9 2009-10-16 20:53:39
There's an easy solution to this. 有一个简单的解决方案。 Set up a CSS class as follows 设置CSS类，如下所示
.js #div_id { display: none; }
Then have the following jQuery 然后有以下jQuery
$('html').addClass('js');
$(document).ready(function() {
/* normal code to run when DOM has loaded here */
});
the <div> will be hidden immediately (no flashes) if users have JavaScript enabled and won't be if they don't (which circumvents possible graceful degradation problems as meder points out in his option c). 如果用户启用了JavaScript，则<div>将立即隐藏（不闪烁），如果用户未启用，则不会被隐藏（这避免了在选项c中指出的可能的适度降级问题）。
This works because when can immediately access the <html> element when the page starts to load. 之所以可行，是因为当页面开始加载时，何时可以立即访问<html>元素。
The reason why document.getElementById("div_id").style.display='none'; document.getElementById("div_id").style.display='none'; is probably working is because you have it in the <body> after the element and therefore the script does not wait for the whole DOM to be loaded before executing. 可能是工作是因为你拥有了它在<body>元素后，因此脚本不会等待整个DOM执行前被加载。
解决方案2
3 2009-10-16 20:48:12
You could either 你可以
- a) insert a script element directly after the element to hide it with jQuery: a）在脚本元素之后直接插入脚本元素，以使用jQuery将其隐藏：
- b) have inconsistent Javascript by directly using DOM methods like your first code snippet b）通过直接使用DOM方法（如第一个代码段）来获得不一致的Javascript
- c) hide it with CSS with the disadvantage that for CSS enabled non-JS users they wouldn't be able to see anything c）用CSS隐藏它的缺点是，对于启用CSS的非JS用户，他们将看不到任何东西
I would choose between A and C, though I'm not sure exactly what you're hiding. 尽管我不确定您要隐藏的内容，但我会在A和C之间进行选择。
A: A：
<div id="foo"></div>
<script>$('#foo').hide()</script>
C: C：
div#foo { display:none; }
解决方案3
2 已采纳 2009-10-16 21:05:06
First, use $("#div_id").hide(); 首先，使用$("#div_id").hide(); . 。 It's more idiomatic for jQuery. 对于jQuery来说，这更惯用了。
Second, it's because you're using $(document).ready . 其次，这是因为您正在使用$(document).ready 。 Usually, that event doesn't fire until the DOM is available for use. 通常，只有在DOM可用之前，该事件才会触发。 However, because of the way bindReady() is implemented, it's possible on some browsers for this event to be equivalent to the onload event, which won't fire until everything is loaded. 但是，由于实现bindReady()的方式，在某些浏览器中，此事件可能等同于onload事件，该事件在加载所有内容之前不会触发。 Unfortunately, the only way that I know of to get around this (that doesn't cause problems for disabled users who can't use JavaScript because of a screen reader) is to set a short timeout (say 50ms) and repeatedly check for the existence of $("#div_id") while the page is loading. 不幸的是，我所知解决此问题的唯一方法（不会对因屏幕阅读器而无法使用JavaScript的残疾用户造成问题）是设置较短的超时时间（例如50ms）并反复检查页面加载时$("#div_id")存在。 This is a horrible hack, and I hesitate to recommend it, but it should work. 这是一个可怕的骇客，我不敢推荐它，但是应该可以。 That said, you're almost better off just accepting the flash of content, knowing that most users won't see it. 就是说，您知道几乎所有用户都看不到内容，所以您几乎可以接受内容的更新。
解决方案4
0 2009-10-16 20:48:07
I think the reason is that the DOM loads progressively and the $(document).ready event is waiting for the DOM to be fully loaded before executing. 我认为原因是DOM逐渐加载，并且$（document）.ready事件正在等待DOM 完全加载后再执行。
If you really want the element to be invisible when the page loads, can you define that style in your CSS instead? 如果您确实希望元素在页面加载时不可见，那么您可以在CSS中定义该样式吗？
I haven't tried this, but if you still want the div to be visible for non-Javascript users then I think you could do something like this: 我没有尝试过，但是如果您仍然希望div对非Javascript用户可见，那么我认为您可以执行以下操作：
<noscript>
<style type="text/css">
#elementid {display: block !important;}
</style>
</noscript>
解决方案5
0 2009-10-16 20:48:56
I think a better option would be to style the div so that it is hidden when the page is written, without any javascript. 我认为更好的选择是设置div的样式，以便在编写页面时将其隐藏，而无需使用任何JavaScript。
Then, whenever you are ready to show it again, use javascript to unhide it: 然后，每当您准备再次显示它时，请使用javascript取消隐藏它：
$('#someId').show();
解决方案6
0 2009-10-16 20:49:00
It might be cause by the way you include the scripts. 这可能是由于您包含脚本的方式引起的。 The browser has to download them before they are run. 浏览器必须先下载它们，然后才能运行它们。 So if you have a lot of js files this can cause this problem. 因此，如果您有很多js文件，则可能会导致此问题。
解决方案7
-1 2009-10-16 20:49:36
More likely it's because you are waiting until the document is ready to hide it. 更有可能是因为您正在等文档准备好隐藏它。 This seems more like a job for server side script if you want it hidden by default. 如果您希望默认情况下将其隐藏，则这似乎更像是服务器端脚本的工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.