如何在JavaScript禁用时隐藏HTML的部分内容？

我正试图适应没有JavaScript的用户。（顺便说一下，是不是值得的今天？）如何在JavaScript禁用时隐藏HTML的部分内容？

在一个HTML文件，我想它的一部分执行，如果脚本是在，而另一部分，如果脚本是OFF。

<noscript>标签让我做前者，但如何实现后者？如果脚本为off，我该如何标记HTML的一部分，以便它不被浏览器解析？

2009-10-16 z-boss

这里有一个如何这可以用jQuery做的视频教程：http://screenr.com/ya7

代码：

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

然后就是隐藏相应body.noscript下的相关内容。

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

来源

2009-10-16 11:56:26 Natrium

@ user2667066我认为你评论了错误的答案，因为这是默认的，并且确实需要JQuery。 – Natrium 2016-09-16 04:57:43

Eidited and moved，sorry – user2667066 2016-09-16 07:07:02

默认情况下，您想隐藏的位的样式为display:none，并使用jQuery或JavaScript将其打开。

来源

2009-10-16 11:50:08

onready event是一个好的方法去 – Ismael 2009-10-16 11:53:09

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>

来源

2009-10-16 11:56:23

顺便问一句，现在值得努力？

是的，这是值得忧虑的可访问性。在可能的情况下，您应该使用渐进式增强功能，即制作无需脚本的基本版本，然后在其上添加脚本功能。

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

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

然而，这个链接是行不通的，如果有人，比如说，中击或尝试书签，或已禁用脚本等相反，你可以做同样的事情像这样：

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

它仍然不是完美的，因为你要分开的行为和结构层，避免内联事件处理程序，但它是更好，因为它更容易获得，而且不需要脚本。

来源

2009-10-16 12:02:53 slikts

你甚至不需要JavaScript。 – Joe 2009-10-16 14:11:21

我不认为这是Reinis得到的点 – roryf 2009-10-16 14:14:20

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

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

关于在body标签上使用类名称的CSS技术，我建议以相反的方式来做这件事，并用JavaScript来为body标签添加'js-enabled'类，这会改变页面CSS。这符合我上面有关保持所有初始HTML'非JavaScript友好'的评论。

来源

2009-10-16 12:14:48 roryf

我一直在寻找一种方法来做到这一点，这样我就可以隐藏导航下拉菜单，当javascript被启用时，导航下拉菜单变得无法使用。但是，用于更改显示属性的所有解决方案都不起作用。

因此，我所做的第一件事是为下拉菜单周围的div元素分配一个ID（ddown）。

然后，在HTML文档的头部部分中，我添加了这个在：

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

而这只是工作。不依赖于javascript，jquery或任何其他脚本：纯粹的HTML和CSS。

来源

2012-12-13 10:25:02

这应该是默认的答案 - 简单，并且不需要JQuery – user2667066 2016-09-16 07:07:11

由于某些原因，这是isn在我的页面中无法正常工作。即使启用了JS，它仍然隐藏了选择器''。顺便说一下，我的页面是XHTML。 – alej27 2016-12-29 09:42:42

如何在JavaScript禁用时隐藏HTML的部分内容？

回答

相关问题