如何阻止我的 div 出现几秒钟然后消失？答案

【问题标题】：How can I stop my div appearing for a couple of seconds and disappearing?如何阻止我的 div 出现几秒钟然后消失？
【发布时间】：2012-02-01 10:09:28
【问题描述】：

我为我工作的公司维护了一个网站，就在昨天，它以某种方式出现了一个我无法解决的问题。我用谷歌搜索了我的流浪汉，找不到解决方案。问题是我们的页面底部有三个 '，只有当您单击它们的相关链接时才会显示（三个链接的无序列表，每个链接加载一个 javascript 显示/隐藏功能）。但是从昨天开始，三个人都显示了大约2秒然后就消失了，这很烦人！！除非单击，否则它们根本不应该显示。该网站位于 www.successphotography.com - 自己看看吧！任何帮助将不胜感激。相关代码：

<ul class="moreInfo">
<li onclick='swappy("graduation")'>Graduation Photography</li>
<li onclick='swappy("school")'>School Photography</li>
<li onclick='swappy("family")'>Family Photography</li>
</ul>
<div id="graduation">
<--- lots of content here --->
</div
<div id="school">
<--- lots of content here --->
</div>
<div id="family">
<--- lots of content here --->
</div>

swappy 函数的 javascript 是：

    window.onload=function(){

if (document.getElementById("graduation")) { 
    document.getElementById("graduation").style.display = 'none';
    document.getElementById("school").style.display = 'none';
    document.getElementById("family").style.display = 'none';

    }
}
function swappy(myself){
    switch(myself){
        case("graduation"):
            document.getElementById("graduation").style.display = 'block';
            document.getElementById("school").style.display = 'none';
            document.getElementById("family").style.display = 'none';
        break;
        case("school"):
            document.getElementById("graduation").style.display = 'none';
            document.getElementById("school").style.display = 'block';
            document.getElementById("family").style.display = 'none';       
        break;
        case("family"):
            document.getElementById("graduation").style.display = 'none';
            document.getElementById("school").style.display = 'none';
            document.getElementById("family").style.display = 'block';      
        break;
        default:
            document.getElementById("graduation").style.display = 'none';
            document.getElementById("school").style.display = 'none';
            document.getElementById("family").style.display = 'none';
        break;
    }
}

任何帮助将不胜感激！非常感谢

【问题讨论】：

CSS 中 div 的样式是什么？如果您希望它们在页面加载时不出现，请将它们设置为 display:none 那里。

标签： javascript css html getelementbyid

【解决方案1】：

既然您已经在使用 jQuery，请考虑使用 ready 处理程序：

$().ready(function(){ /* code to hide elements here */})

而不是你当前的window.onload=function

这将在文档准备好时执行您的函数，而不是在窗口加载后执行，并且可能会消除您目前看到的闪烁。

【讨论】：

【解决方案2】：

这是因为您仅在 window.onload 事件发生时才隐藏您的 div，这当然可能需要一些时间，具体取决于您必须在页面中加载多少元素、延迟、渲染等。

为了避免 Javascript FOUC（无样式内容的 Flash），您应该改为通过 css 隐藏 #school 和 #family 元素，但是当未启用 js 时，您将无法再访问这些 div 的内容。所以看看这个讨论：implementing unobtrusive javascript

【讨论】：

【解决方案3】：

这里的黄金法则是：

您应该配置/构建您的 CSS 和 JS，以使您的前端显示（@初始加载）在启用 JavaScript 和未启用 Javascript 的情况下完全相同。

这样你永远不会得到摇摆不定的加载响应。

快速修复：最初使用 CSS 隐藏 div（显示：无）

【讨论】：

我认为这不是最好的建议。禁用 JS 后，您希望显示隐藏的框。启用或禁用 JS 的用户应该可以访问内容。用 CSS 隐藏它可以消除未启用 JS 的用户的这种可能性。
@JamieDixon 这就是noscript 标签的用途。
在创建它们之后，您只需将它们设为 display: none 在名为 exactley 的 js 函数中。这样页面的加载时间不会影响到加载开始并且它们被隐藏之前的时间。
@Jivings 在这种情况下你会如何实现 noscript？您会复制本节的 HTML 还是做其他事情？我很想知道这将如何实现。
谢谢，我已经使用了你的快速修复，直到我实现了一个可以同时使用 CSS 和 javascript 的非侵入式版本