如何隐藏DIV,他们在页面加载时显示拆分秒

时间:2009-12-06 17:41:07

标签: jquery element

我已经制作了一个非常快速的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;}

这将解决他们显示一瞬间的问题,只想知道它是否可以接受

5 个答案:

答案 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的用户的额外奖励。