我已经制作了一个非常快速的jQuery幻灯片,我正在使用它来隐藏那些在轮到他们之前不应该显示的DIV:
$(document).ready(function() {
//Hide All Div's Apart From First
$('div#gall2').hide();
$('div#gall3').hide();
$('div#gall4').hide();
但是在加载页面时,你可以看到DIV的胆汁2加仑胆汁和胆汁4秒,然后隐藏起来。
只需在我的CSS中添加就可以了:
#gall2, #gall3, #gall4{ display:none;}
这将解决他们显示一瞬间的问题,只想知道它是否可以接受
答案 0 :(得分:15)
在CSS中禁用很好,但是没有JS的用户永远不会看到它们。
要仅为具有JS的用户禁用,请标记正文和相应的CSS:
<body>
<script type="text/javascript">
document.body.className += " js";
</script>
CSS:
.js #gall2, .js #gall3, .js #gall4 { display: none; }
答案 1 :(得分:2)
是的,在你的CSS
其他受访者是正确的。使用JS只能看到东西并不是一个好习惯。我想我只是在技术上思考:用这种方式改变CSS可以解决问题。
答案 2 :(得分:2)
作为orip答案的替代方案,如果您不想在<body>
中添加脚本,则可以执行以下操作:
<html>
<head>
<script src="jquery.js"></script>
<script>
$('html').addClass('js');
$(function() {
// do DOM ready stuff
});
</script>
<style>
.js #gall2, .js #gall3, .js #gall4 { display: none; }
</style>
</head>
您将避免以这种方式闪烁,因为您在 DOM准备好之前向HTML 添加了一个类名。
答案 3 :(得分:0)
总是试着想象一下,关闭JS的用户会看到什么。如果你使用CSS解决方案,也不会为他们显示非第一个DIV,但是如果你以编程方式更改幻灯片,他们将只看到第一个,显然。最好给他们一个“No JS”选项。然后,如果您确定用户已启用JS,则可以使用CSS隐藏div并使用JS显示它们。
答案 4 :(得分:0)
它们正在显示,因为默认情况下可能会显示div。由于在页面上触发“就绪”事件可能需要几秒钟,因此在页面上的所有内容都已加载并准备就绪之前,不会触发.hide()方法调用。
如果我没记错,.hide()方法只会将元素的“display”属性设置为“none”。因此,默认设置通过CSS隐藏的div允许它们始终被隐藏,并且您可以获得没有JS的用户的额外奖励。