仅在Javascript可用时隐藏html

我想这更多是关于SEO而不是想要支持禁用Javascript的浏览器。我有Javascript / jQuery代码，读取一些HTML，基本上显示它更好。在此过程中实际删除了html（使用jQuery的.remove()函数）。

所以我隐藏了html，因此页面加载时没有任何视觉工件。但是现在我想只在启用Javascript时隐藏它。我想最简单的事情就是在中添加一些Javascript，将display: none css规则添加到相应的元素中。

有没有更好的方法来处理这种情况？

任何JavaScript只有在启用JavaScript时才有效，因此无论您如何使用JavaScript，只有在启用JavaScript时它才会起作用，因此您无需为此进行测试。

话虽如此，您可以在HTML5 Boilerplate中看到它是如何完成的：

  ... the rest of the page

使用应用于标记的no-js类。稍后使用JavaScript删除该类，并添加一个js类，您可以在CSS和HTML中使用这两个类：

 This is displayed if JavaScript is enabled
 This is displayed if JavaScript is disabled

或者在CSS中：

 .no-js #someWidget { display: none; } .js #someFallback { display: none; }

如果您正在使用Modernizr，那么它已经为您更改了这些类，但即使您没有，那么您所要做的就是：

  document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');

这是一个简单而优雅的解决方案，您需要担心的是样式和标记中的CSS类。

我认为使用noscript html 标签可以完成这项工作。如果在用户浏览器中禁用了脚本，则标签会显示内部内容。

我可能会使用一个脚本来设置一个类，然后在CSS中引用，但基本上，你是在正确的轨道上。

例如：

然后你的CSS规则：

 body.jsenabled selector_for_your_initially_hidden_content { display: none; }

只有身体有class级，规则才会启动。

完整的例子：

HTML（和内联脚本）：

   I'm foo, I'm hidden on load
 I'm not foo, I'm not hidden on load
 Another foo
 Another bit not hidden on load.

CSS：

 body.jsenabled div.foo { display: none; }

实时拷贝我只使用“foo”类作为例子。它可以很容易地成为结构选择器。

将类hiddenblock添加到要隐藏的每个div（或块），并在标头中添加此JS代码：

 $(document).ready(function() { $(body).addClass('jsenable'); $('.hiddenblock').hide(); }

您还可以使用类jsenable来屏蔽或修改其他一些块，如下所示：

 .jsenable #myblock { position: absolute; right: 10000px; }