我经常发现自己使用 jQuery 显示/隐藏元素，例如一个简单的选项卡式内容区域，其中第一个选项卡是可见的，而其他选项卡在使用 javascript 显示之前是不可见的。我知道使用 CSS 隐藏最初隐藏的那些（显示：无）然后用 JS 显示正确的那些不是好习惯，因为非 JS 用户永远不会看到任何东西。所以默认情况下我显示所有，然后用 JS 隐藏相关的。
在这样做时，隐藏的元素将加载，然后仅在文档准备好时才隐藏。我怎样才能阻止这种情况发生？有没有一种方法可以优雅地降级，但在加载时不会出现元素，然后因为看起来有点劣质而迅速消失。
【问题讨论】：
标签： javascript jquery graceful-degradation
不幸的是，Javascript 的工作方式，这似乎是不可能的。 总是在第一个渲染帧和执行隐藏元素的 JavaScript 之间只有几分之一秒 I was wrong about that, jQuery seems to be able to do that。所以，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/
【讨论】：
jQuery 的livequery 拦截正在添加的节点（并在那里修改它），但您的解决方案是一个很好的解决方案。我喜欢这种方法为您提供了一种简单的方法，可以为您希望在脚本和无脚本浏览器之间有所不同的所有 CSS 设置单独的样式表。
一些想法......
如果你不介意 jQuery 在页面上到处乱扔，而不是全部放在一个单独的文件中，你可以调用 $('#divToHide').hide();元素出现后立即。虽然不是很好的做法。虽然这取决于用例，但如果您主要是创建 5 页宣传册网站的设计师/主题者，您应该选择适合您的！
或者，如果你是一个技术人员，你可能想弄乱.live()/.livequery() 并用 JS 捕捉元素的插入，并立即隐藏。看到这个帖子Is there a jquery event that fires when a new node is inserted into the dom?
【讨论】：