Question

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

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

Answer 1

在CSS中禁用很好，但是没有JS的用户永远不会看到它们。

要仅为具有JS的用户禁用，请标记正文和相应的CSS：

<body>
  <script type="text/javascript">
    document.body.className += " js";
  </script>

CSS：

.js #gall2, .js #gall3, .js #gall4 { display: none; }

Answer 2

~~是的，在你的CSS~~

中做这个当然是可以接受的

其他受访者是正确的。使用JS只能看到东西并不是一个好习惯。我想我只是在技术上思考：用这种方式改变CSS可以解决问题。

Answer 3

作为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 添加了一个类名。

Answer 4

总是试着想象一下，关闭JS的用户会看到什么。如果你使用CSS解决方案，也不会为他们显示非第一个DIV，但是如果你以编程方式更改幻灯片，他们将只看到第一个，显然。最好给他们一个“No JS”选项。然后，如果您确定用户已启用JS，则可以使用CSS隐藏div并使用JS显示它们。

Answer 5

它们正在显示，因为默认情况下可能会显示div。由于在页面上触发“就绪”事件可能需要几秒钟，因此在页面上的所有内容都已加载并准备就绪之前，不会触发.hide（）方法调用。

如果我没记错，.hide（）方法只会将元素的“display”属性设置为“none”。因此，默认设置通过CSS隐藏的div允许它们始终被隐藏，并且您可以获得没有JS的用户的额外奖励。

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

5 个答案: