仅当Javascript可用时隐藏html_Javascript_Jquery_Css_Seo_Unobtrusive Javascript

仅当Javascript可用时隐藏html

javascript jquery css seo

仅当Javascript可用时隐藏html,javascript,jquery,css,seo,unobtrusive-javascript,Javascript,Jquery,Css,Seo,Unobtrusive Javascript,我想这更多的是关于搜索引擎优化，而不是想要支持禁用Javascript的浏览器。我有Javascript/jQuery代码，可以读取一些html，基本上显示得更好。在这个过程中，html实际上被删除了（使用jQuery的.remove（）函数）因此，我隐藏了html，以便在加载页面时不会出现任何可视工件。但现在我只想在启用Javascript的情况下隐藏它。我想最简单的事情是在中添加一些Javascript，将display:nonecss规则添加到适当的元素中有没有更好的方法来处理这种情况

我想这更多的是关于搜索引擎优化，而不是想要支持禁用Javascript的浏览器。我有Javascript/jQuery代码，可以读取一些html，基本上显示得更好。在这个过程中，html实际上被删除了（使用jQuery的

.remove（）

函数）

因此，我隐藏了html，以便在加载页面时不会出现任何可视工件。但现在我只想在启用Javascript的情况下隐藏它。我想最简单的事情是在

中添加一些Javascript，将

display:none

css规则添加到适当的元素中

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

我可能会使用一点脚本，在主体上设置一个类，然后您可以在CSS中引用，但基本上，您走的是正确的道路

例如：

这条规则只有在主体拥有类时才会生效

完整示例：

HTML（和内联脚本）：

我只使用了“foo”类作为示例。它可以很容易地成为一个结构选择器。

将类

hiddenblock

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

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

您还可以使用类

jsenable

来屏蔽或修改其他一些块，如下所示：

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

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

任何JavaScript都只有在启用JavaScript时才能工作，因此无论您如何使用JavaScript进行操作，它始终只有在启用JavaScript时才能工作，因此您无需对此进行测试

话虽如此，您可以看到在以下方面是如何做到的：

或在CSS中：

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

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

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

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

效果最好，因为Akaruns解决方案可能会在dom完全加载之前引起轻微的闪烁。是的，这取决于您拥有的“hiddenblock”的数量@阿卡伦：我认为没有。将类添加到

body

中，可以很容易地使用选择器隐藏您想要的任何内容，无论是结构选择器还是（如果所有其他方法都失败了）通过向要隐藏的内容添加类（如示例所示，为了清晰起见）。加载页面时，非javascript html不会闪烁吗？

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

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

<html class="no-js" lang="en">
... the rest of the page
</html>

<p class="js">This is displayed if JavaScript is enabled</p>
<p class="no-js">This is displayed if JavaScript is disabled</p>

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

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