禁用 javascript 时使隐藏的 div 可见答案

【问题标题】：Make a hidden div visible when javascript disabled禁用 javascript 时使隐藏的 div 可见
【发布时间】：2017-04-17 09:12:51
【问题描述】：

我目前在我的 HTML 中有一个最初隐藏的 div（使用 display:none）。

<div class="fulladdress">
   <p>Only display the contents of this div when an element is clicked!</p>
</div>

然后我使用以下 Javascript，因此当单击 .autocompleteitem 项目时，它会显示：

$(document).ready(function() {

    $(document).on('click','.autocompleteitem:not(.autocompleteitemwithcontainer)',function(){
        $("div.fulladdress").show();
    });
});

但是，如果禁用 Javascript，则永远不会显示完整地址。我该如何解决这个问题？

【问题讨论】：

您可以改为通过 CSS 属性隐藏/显示内容。
查看此帖 Link for stack overflow post
有人简短地发布了一个关于使用 jQuery 的 hide 的链接，我现在调整了我的代码以使用它。很有道理:)
可以直接使用$(".fulladdress").show();而不是使用 DIV。

标签： javascript jquery

【解决方案1】：

也许可以尝试使用标签<noscript>。如果禁用 javascript，它会运行其中的代码。

【讨论】：

我考虑过这个，但是如果我已经用 CSS 隐藏了 .fulladdress，它会显示吗？
不确定，但我认为您可以使用 document. 显示 div，然后选择显示，或者您可以在 <noscript> 内创建 div，但我认为您不希望这样

【解决方案2】：

使用以下 HTML 代码。现在，当用户禁用 JavaScript 或设备不支持 JavaScript 时，用户可以看到 div。您可以通过选择 CSS 上的 .fulladdress 类来自定义您的 div。

 <noscript>
     <div class="fulladdress">
        <p>Only display the contents of this div when an element is clicked!
        </p>
     </div>
</noscript>

【讨论】：

【解决方案3】：

你可以试试这样的。

如果启用了 javascript - 在文档准备好时隐藏 div，然后在点击事件时显示

如果 javascript 禁用了您的文档准备功能，它将不会执行并且不会隐藏 div

$(document).ready(function() {
    $("div.fulladdress").hide();
    $("#button").on('click',function(){
        $("div.fulladdress").show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fulladdress">
   <p>Only display the contents of this div when an element is clicked!</p>
</div>
<div class="button">
   <button id="button">display</button>
</div>

【讨论】：

我知道div是通过CSS隐藏的，jQuery只是用来显示的。所以实际的问题是如何在不使用 JavaScript 的情况下显示被 CSS (display: none) 隐藏的div。我也明白，如果 JavaScript 被禁用，显示隐藏的 div 是不太可接受的。最好先隐藏然后再显示（但不使用 JavaScript）。
在这种情况下，这就是诀窍。使 css 属性显示 div，如果启用了 javascript，则在文档准备功能中隐藏它或将 css 属性更改为显示：none。因此，如果禁用 javascript，它将显示 div
是的，如果默认值（据我理解的问题）允许 div 在禁用 JavaScript 时可见，那就没问题了。然而，作者仍然希望它被隐藏，即使 JavaScript 被禁用，并且如果用户点击 div 则切换。我相信有很多方法可以不用 JavaScript。
是的，我同意我建议的答案不是一个确切的答案，但是如果禁用了 javascript，您将如何检测点击事件？如果他正在使用 javascript 功能，如果 javascript 被禁用，他必须显示错误页面。
CSS 中有一些伪类可以满足需求。例如，如果用户将鼠标悬停在div 上，它将显示.fulladdress，这可以通过CSS 中的:hover 伪类来实现。可以使用复选框伪类属性在 CSS 中注册点击（这有点像 hack，但确实有效）等。

【解决方案4】：

试试这个

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.
    </div>
</noscript>

【讨论】：

【解决方案5】：

如果您必须首先隐藏您的 div，即使禁用了 JavaScript，然后才显示，那么有一些方法可以处理它。

您可以检测 JavaScript 是否被禁用并请求用户启用它，除非用户这样做，否则不会显示页面。 How to detect if JavaScript is disabled?
您可能希望在不使用 JavaScript 的情况下使用“hacks”来检测点击。以下是一些示例：
Show / hide div on click with CSS
What is the simplest way to implement pure css show/hide?

希望这会有所帮助！

【讨论】：