问题描述
|
我的网站上有一个加载异常的模块,因此我想在页面加载时隐藏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将其隐藏。