使用jQuery show揭示div-禁用JS的人会怎样？

如何解决使用jQuery show揭示div-禁用JS的人会怎样？

| 我的网站上有一个加载异常的模块，因此我想在页面加载时隐藏div，然后准备好在文档中显示它。以下（简化的）代码可以正常工作：

<div class=\"slideshow\" style=\"display:none;\">
  This div should be hidden during load
</div>

<script type=\"text/javascript\">
  $(document).ready(function() {
    $(\'.slideshow\').show();
  });
</script>

这按预期工作。但是禁用Java的用户会怎样？ div是否对他们隐藏？如何确保所有用户都能看到小部件？

解决方法

一种很常见的方法是，向<body>或<html>元素添加类.nojs并通过Javascript将其删除，例如负载。这样，您可以通过CSS简单地处理两种不同的状态：

.slideshow {
  display: none;
}

html.nojs .slideshow {
  display: block;
}

可能想在这种情况下尝试http://www.modernizr.com/。 , 您应该从div中删除display：none样式，并将其显式隐藏在document.ready函数中。这样，如果没有javascript，一开始就可以看到它。 , 就个人而言，我更喜欢将CSS用于此类事情。我将这行脚本添加到模板HTML body标签内。

<script type=\"text/javascript\">document.body.className = \"JS\";</script>

然后，对于您描述的场景，我将在div上使用其他CSS类，就像这样。

<div class=\"slideshow initially-hidden\">
  This div should be hidden during load
</div>

通过样式匹配的样式，可以在模板中通过JavaScript添加类。

body.JS .initially-hidden {
  display: none;
}

现在，只有启用了JavaScript，带有“初始隐藏”类的元素才是不可见的。如果禁用，它们将可见。 ,

<div class=\"slideshow\">
  This div should be hidden during load
</div>

<script type=\"text/javascript\">
  $(\'.slideshow\').hide();
  $(document).ready(function() {
    $(\'.slideshow\').show();
  });
</script>

, 如果他们禁用了javascript，则不会显示它...您可以通过不首先隐藏它来确保他们都能看到它。 , 但是禁用Java的用户会怎样？ div是否对他们隐藏？由于您必须显示div的代码无法运行，是的，它将保持隐藏状态。如何确保所有用户都能看到小部件？如果未启用Javascript，请使用ѭ9来将div呈现为隐藏状态，或者将div加载为可见并在加载整个页面之前的某个时间点使用Javascript将其隐藏。

使用jQuery show揭示div-禁用JS的人会怎样？

如何解决使用jQuery show揭示div-禁用JS的人会怎样？

解决方法

相关推荐