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

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

javascript html

禁用JavaScript时如何隐藏部分HTML？,javascript,html,noscript,Javascript,Html,Noscript,我试图适应没有JavaScript的用户。（顺便问一下，现在值得这么做吗？）在一个HTML文件中，我希望它的一部分在脚本打开时执行，另一部分在脚本关闭时执行标签允许我做前者，但如何实现后者？如何标记HTML的一部分，使其在脚本关闭时不被浏览器解析？默认要隐藏的位样式为显示：none，并使用jQuery或JavaScript打开它们。jQuery方式： $(document).ready(function(){ $("body").removeClass("noJS"); }); 伪

我试图适应没有JavaScript的用户。（顺便问一下，现在值得这么做吗？）

在一个HTML文件中，我希望它的一部分在脚本打开时执行，另一部分在脚本关闭时执行

标签允许我做前者，但如何实现后者？如何标记HTML的一部分，使其在脚本关闭时不被浏览器解析？

默认要隐藏的位样式为

显示：none

，并使用jQuery或JavaScript打开它们。

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>


这将显示是否激活了JavaScript
这将在禁用JavaScript时显示

以下是一个视频教程，介绍如何使用jQuery实现这一点：

代码：

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


$（'body'）.removeClass（'noscript'）；

然后将相关元素相应地隐藏在

body.noscript

下。

编辑然而，对于像这样的小补丁，JQuery可能会过于臃肿，所以我建议，因为它不需要JQuery

顺便问一下，这值得努力吗现在

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

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

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

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

但是，如果有人（例如）点击鼠标中键或尝试将其添加书签，或禁用脚本等，则此链接将不起作用。相反，您可以这样做：

<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时才有意义，然后，它应该由JavaScript代码直接插入，而不是呈现。这可以通过在JavaScript代码中将HTML模板作为字符串来实现，如果HTML更复杂，也可以使用Ajax

因为这是我们的想法

关于在body标记上使用类名的CSS技术，我建议用另一种方法，使用JavaScript向body标记添加一个启用了js的类，该类将改变页面CSS。这符合我上面关于保持所有初始HTML“非JavaScript友好”的评论。

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

因此，我首先为下拉菜单周围的div元素分配了一个ID（ddown）

然后，在HTML文档的head部分中，我添加了以下内容：

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


#ddown{显示：无；}

这就行了。不依赖javascript、jquery或任何其他脚本：只需纯HTML和CSS。

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

document.querySelector（'div'）.style.display='block'
div{
显示：无；
}
Div这使得Div中的内容在没有JS的情况下无法访问，但是使用JS，它会使用JS将内容添加到Div中，您也可以使用CSS来实现这一点。
要更改CSS添加，请执行以下操作：
document.querySelector（'style'）.innerHTML='div{}'；


document.querySelector（'div，#div'）。innerHTML='div'
您甚至不需要JavaScript来实现这一点。只需命名您的目标（或使用'target=“_blank”'），如果您想要一个弹出窗口怎么办？然后使用window.open（）
。这应该是默认答案-很简单，不需要jquery，因为在我的页面中它无法正常工作。即使启用了JS，它仍然会在中隐藏选择器。。。{display:none；}
。顺便说一下，我的页面是XHTML。@alejnavab XHTML不支持noscript标记。请使用@Zauber Paracelsus的解决方案，因为它不需要jQuery。