Question

我目前正在处理的网站中有一个消息传递工具。我们的想法是为每条消息设置一个标题div和一个详细信息div（display =“none”）。

理想情况下，如果启用了javascript，我只会显示标题，当用户点击它时，详细信息div会滑开。

这很好，但是如果禁用了javascript，我应该怎么做？我想在禁用时扩展所有消息，但是当页面加载所有图像时我不想短暂闪烁，如果启用了javascript，它们会崩溃。

我正在使用ASP.NET并且正在考虑检查浏览器服务器端的javascript状态，但我发现它无法干净地完成。

有关如何实现这一目标的任何建议吗？

Answer 1

一种选择是将它置于脑中（在定义的样式之后）：

<noscript>
<style type="text/css">
#mydivid {display: block;}
</style>
</noscript>

编辑：我实际上发布了a better answer，这是正确的默认状态。

Answer 2

实际上，你可以做到这一点的语义最正确的方法是通过包含样式的javascript将另一个样式表附加到头部，如果启用了javascript，将会实现这些样式。

在您的示例中，您将保留相关元素的默认显示。

然后你将创建一个额外的样式表（例如js-enabled-styles.css），并在其中放置display：none。

然后，在头部的脚本标记中，您将附加一个额外的样式表。使用jquery，这将是：

$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />');

Answer 3

你是对的，服务器只能告诉你浏览器是否有JavaScript，它不知道是否启用了。

您可以尝试的事情是不要使用onready或onload，只需将行放在JavaScript的底部以隐藏内容即可。您甚至可能希望将其直接放在页面上的元素之后。

<div id="foo">
    asdf
</div>
<script type="text/javascript">
    jQuery("#foo").css("display","none");
</script>

一方面注意，听起来你应该使用definition list而不是两个div。对使用屏幕阅读器的人来说可能更有意义。

Answer 4

我相信您正在寻找<noscript>代码。

你可以通过几种方式之一来实现你描述的结果，但这是一个相当简单的方法。将div的默认样式定义为：

<style type="text/css">
     div.details
     {
         display: none;
     }
</style>

在此style标记之后，使用noscript块覆盖默认（启用JavaScript）样式，如下所示：

<noscript>
<style type="text/css">
     div.details
     {
         display: block;
     }
</style>
</noscript>