JavaScript-在启动时隐藏一个Div（加载）_Javascript_Jquery_Css_Html_Hide

JavaScript-在启动时隐藏一个Div（加载）

javascript jquery css html

JavaScript-在启动时隐藏一个Div（加载）,javascript,jquery,css,html,hide,Javascript,Jquery,Css,Html,Hide,我的php页面中有一个div，它使用jQuery在页面加载后隐藏它。但是，有没有一种方法可以在加载一开始就隐藏它呢我问这个问题的原因是，在一小段时间内，您可以在页面加载时看到div，然后在页面完全加载时隐藏这看起来不专业只是想知道有没有办法解决这个问题谢谢使用css样式隐藏div #selector { display: none; } 或者像下面那样使用它 CSS: HTML 为什么不在divs样式属性中添加“display:none；”？这就是JQuery的.hide（）函数的全部

我的php页面中有一个div，它使用jQuery在页面加载后隐藏它。但是，有没有一种方法可以在加载一开始就隐藏它呢

我问这个问题的原因是，在一小段时间内，您可以在页面加载时看到div，然后在页面完全加载时隐藏

这看起来不专业

只是想知道有没有办法解决这个问题

谢谢

使用css样式隐藏div

#selector { display: none; }

或者像下面那样使用它

CSS:

HTML

为什么不在divs样式属性中添加“display:none；”？这就是JQuery的.hide（）函数的全部功能。

使用CSS，您只需为CSS文件或样式属性中的元素设置display:none

#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>

#div{display:none；}

或者，在div之后使用js可能也足够快，但如果没有CSS解决方案，就没有那么干净了。最快的方法是立即用脚本隐藏它

<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>


$（“#hideme”）.hide（）；

在这种情况下，我推荐Vega的CSS解决方案。但是如果你需要更复杂的东西（比如动画），你可以使用这种方法

这有一些复杂性（见下面的评论）。如果你想让这段脚本尽可能快地运行，你不能使用jQuery，只使用原生JS并推迟加载所有其他脚本。

我也遇到了同样的问题

使用CSS隐藏不是最好的解决方案，因为有时您希望没有JS的用户可以看到div。。最干净的解决方案是使用JQuery隐藏div。但是div在0.5秒左右是可见的，如果div位于页面顶部，则会出现问题

在这些情况下，我使用中间解决方案，而不使用JQuery。这一条有效且直接：

document.write（'.js_hidden{display:none；}'）
此div将对JS用户隐藏，对非JS用户可见。

当然，您仍然可以在div上添加所需的所有效果，例如JQuery toggle（）。
您将获得最佳行为（imho）：

对于非JS用户，div是直接可见的
对于JS用户，div是隐藏的，具有切换效果
这个方法我用过很多次，不确定它是否是一个很好的方法，但它适合我的需要
<html>
<head>  
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
</head>
<body>
    <div id="HiddenStuff1" style="display:none">
    CONTENT TO HIDE 1
    </div>
    <div id="HiddenStuff2" style="display:none">
    CONTENT TO HIDE 2
    </div>
    <div id="HiddenStuff3" style="display:none">
    CONTENT TO HIDE 3
    </div>
    <input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>


函数集合可见性（id，可见性）{
document.getElementById（id）.style.display=可见性；
}
隐藏内容1
隐藏内容2
内容隐藏3
我建议您不要这样做。w3schools是对的，也是错的。@PyloverW3schools引用的，内容已经过时，他们的标准也没有更新。我最近通过艰苦的方式学到了这一点，我建议你们要么去看看学校，要么就足够了oliver@pylover写了“w3schools对Oliver来说已经足够了”…你基本上是说Oliver对编码是新手，他可以满足于那些过时且有一半错误的源代码？内联script
标记只会给你的HTML文件带来更多混乱。他需要绝对的速度，这一目标证明了一点混乱的HTML是正确的。务实一点，知道什么时候打破标准。但我不认为jQuery已经加载到了<代码>$（“隐藏”）.hide（）

可能会给您一个

ReferenceError

…它不会（假设jQuery包含在标题中），它会在可用时立即运行。JavaScript是按顺序执行的，这意味着这个脚本只有在加载并执行之前的所有脚本之后才会执行。加载它不需要时间吗？当jQuery到达该行时，它可能没有完全加载。（使用慢速互联网时）谢谢，尽管这里的所有答案都很有帮助。这一个非常好用。谢谢，allI想补充一点，如果禁用javascript，div将保持隐藏状态。如果是这样的话，可以使用.no js（参见Modernizer）之类的类来显示它。对于完全加载页面时开始的淡入、滑入等动画特别有用。您还可以使用js方法

toggleClass（'hidden'）

轻松切换其可见性。如果查看OP，您将看到加载jQuery之前需要隐藏div。这就是导致FOUC的原因。您必须使用CSS解决方案来确保在加载jQuery时隐藏div。使用.hide（）只在jQuery加载后才起作用。@JimpP我认为Moo会留下来，你应该直接将它添加到元素中，就像隐藏内容一样，从一开始就将元素从html中隐藏起来。jQuery在其隐藏和显示函数中使用此css属性。我认为这是一个很好的答案，但应该更详细。在我看来，这是最好的答案。尽管如此，我还是宁愿使用Modernizer提供的.no js类来实现一种不那么麻烦的方法。没有document.write，有什么方法可以做到这一点吗？公平地说，css解决方案并不总是容易应用的。例如，当第三方模块生成div时。那么，用JS尽可能快地隐藏元素（即使不等待文档准备就绪）为什么它能工作呢？你做了什么改变？以这种方式解决问题的答案有助于读者更好地理解自己的问题

#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>

<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>

<html>
<head>  
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
</head>
<body>
    <div id="HiddenStuff1" style="display:none">
    CONTENT TO HIDE 1
    </div>
    <div id="HiddenStuff2" style="display:none">
    CONTENT TO HIDE 2
    </div>
    <div id="HiddenStuff3" style="display:none">
    CONTENT TO HIDE 3
    </div>
    <input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>