禁用 JavaScript 时如何隐藏部分 HTML？答案

【问题标题】：How to hide parts of HTML when JavaScript is disabled?禁用 JavaScript 时如何隐藏部分 HTML？
【发布时间】：2009-10-16 11:47:11
【问题描述】：

我正在尝试为没有 JavaScript 的用户提供服务。（顺便问一下，现在的努力值得吗？）

在一个 HTML 文件中，如果脚本开启，我希望它的一部分执行，如果脚本关闭，我希望执行另一部分。

<noscript> 标签让我做前者，但如何实现后者呢？如果脚本关闭，我如何标记 HTML 的一部分，使其不被浏览器解析？

【问题讨论】：

标签： javascript html noscript

【解决方案1】：

我一直在寻找一种方法来做到这一点，以便我可以隐藏一个导航下拉菜单，该菜单在启用 javascript 时会呈现为非功能性。但是，所有更改显示属性的解决方案都不起作用。

所以，我首先为下拉菜单周围的 div 元素分配了一个 ID (ddown)。

然后，在 HTML 文档的 head 部分中，我将其添加到：

<noscript>
    <style>
        #ddown {display:none;}
    </style>
</noscript>

这很奏效。不依赖于 javascript、jquery 或任何其他脚本：只是纯 HTML 和 CSS。

【讨论】：

这应该是默认答案 - 简单，不需要 JQuery
由于某种原因，这在我的页面中无法正常工作。即使启用了 JS，它仍然会隐藏<noscript><style>... {display:none;}</style></noscript> 中的选择器。顺便说一下，我的页面是 XHTML。
@alejnavab XHTML 不支持 noscript 标签。

【解决方案2】：

默认你想隐藏的位样式为display:none，并使用jQuery或JavaScript打开它们。

【讨论】：

【解决方案3】：

~~这是一个关于如何使用 jQuery 完成此操作的视频教程：http://screenr.com/ya7~~

代码：

<body class="noscript">
<script>
$('body').removeClass('noscript');
</script>
</body>

然后相应地隐藏body.noscript下的相关元素。

编辑但是，JQuery 可能会因为像这样的小修复而臃肿，所以我建议Zauber Paracelsus' answer，因为它不需要 JQuery。

【讨论】：

请使用@Zauber Paracelsus 的解决方案，因为它不需要jQuery。

【解决方案4】：

顺便说一句，是否值得努力现在？

是的，值得担心可访问性。您应该尽可能使用渐进增强，即制作一个无需脚本即可工作的基本版本，然后在其之上添加脚本功能。

一个简单的例子是一个弹出链接。你可以做一个这样的：

<a href="javascript:window.open('http://example.com/');">link</a>

但是，如果有人（例如，中键单击或尝试为其添加书签，或禁用脚本等）此链接将不起作用。相反，您可以执行以下相同操作：

<a href="http://example.com/" 
   onclick="window.open(this.href); return false;">link</a>

它仍然不完美，因为您应该将行为层和结构层分开并避免使用内联事件处理程序，但它更好，因为它更易于访问且不需要脚本。

【讨论】：

你甚至不需要 JavaScript。只需命名您的目标（或使用 'target="_blank"'）
如果你想要一个弹出窗口怎么办？然后使用window.open()。

【解决方案5】：

如果内容只有在启用 JavaScript 时才有意义，那么它应该由 JavaScript 代码直接插入而不是渲染。这可以通过简单地将 HTML 模板作为字符串包含在 JavaScript 代码中来完成，或者如果 HTML 更复杂，则使用 Ajax。

作为mentioned by Reinis I.，这是Progressive Enhancement的想法。

关于在 body 标签上使用类名的 CSS 技术，我建议反其道而行之，并使用 JavaScript 在 body 标签中添加一个“js-enabled”类，这会改变页面 CSS。这符合我上面关于保持所有初始 HTML“非 JavaScript 友好”的评论。

【讨论】：

【解决方案6】：

jQuery 方式：

$(document).ready(function(){
    $("body").removeClass("noJS");
});

伪 CSS

body
    .no-js-content
        display: none;
body.noJS
    .main
        display: none;
    .no-js-content
        display: block;

HTML

<body class="noJS">
    <div class="main">
        This will show if JavaScript is activated
    </div>
    <div class='no-js-content'>
        This will show when JavaScript is disabled
    </div>
</body>

【讨论】：

【解决方案7】：

您可以使用 Javascript 编辑页面的 HTML

document.querySelector('div').style.display = 'block';

div {
  display: none;
}

&lt;div&gt;Div&lt;/div&gt;

尝试使用 JS 和不使用 JS。

【讨论】：

【解决方案8】：

这使得 div 中的内容在没有 JS 的情况下无法访问，但使用 JS 会将内容添加到使用 JS 的 div 中，您也可以使用 CSS 来做到这一点。要更改 CSS 添加：

document.querySelector('style').innerHTML = 'div{}';

document.querySelector('div, #div').innerHTML = 'Div';

&lt;div id='div'&gt;&lt;/div&gt;

【讨论】：