渐进式增强-不使用CSS隐藏元素

Question

我经常发现自己用jQuery显示/隐藏元素，例如一个简单的选项卡式内容区域，其中第一个选项卡可见，其他选项卡直到用javascript显示才可见。我知道用CSS隐藏最初隐藏的内容（display:none），然后用JS显示正确的内容是不好的做法，因为非JS用户永远看不到任何东西。因此，默认情况下，我使用JS显示所有内容，然后隐藏相关内容。

不过，在执行此操作时，隐藏的元素将加载，然后仅在文档准备就绪时隐藏。我该如何阻止这种情况的发生？有没有一种方法可以做到这一点，既能优雅地降解，又不会在加载时出现元素，然后迅速消失，因为这看起来有点粗制滥造。

Answer 1

不幸的是，按照Javascript的工作方式，这似乎是不可能的。在第一个渲染帧和隐藏元素的JavaScript执行时，总是有一秒的时间。我错了，jQuery似乎能够做到这一点。因此，CSS是最好的方法。幸运的是，您可以在臭名昭著的<noscript>标签中添加一个替代CSS样式表：

<style type="text/css">
    #jquery-thing {
        display: none;
    }
</style>
<noscript>
    <style type="text/css">
        #jquery-thing {
            display: block !important;
        }
    </style>
</noscript>

以下是JSFiddle链接：http://jsfiddle.net/kylewlacy/dbWuc/

Answer 2

一些想法。。。

如果你不介意jQuery被放在整个页面上，而不是放在一个单独的文件中，你可以调用$（'#divToHide'）.hide（）；紧接在元素出现之后。不过不是很好的做法。虽然这取决于用例，但如果你主要是一名设计师/主题设计师，正在创建一个5页的小册子网站，你应该选择适合你的！

或者，如果你是一个技术人员，你可能喜欢摆弄.live()/.livequery()，用JS捕捉元素的插入，然后直接隐藏。请参阅这篇文章。当一个新节点插入到dom中时，是否有一个jquery事件会触发？