Question

我试图隐藏div，然后在页面完全加载后显示自己。

div标签没有出现，但是它也从不加载，我也不知道为什么。

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
  $('#home-pro-slider').show();
});
</script>

<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs" style="display:none;">



</div>
</div>
</div>

我的控制台显示：

未捕获的ReferenceError：未定义$ 在（index）：479

我相信这是由于我在运行此代码段之前未加载jQuery引起的，但是据我所知，在代码运行之前，我的标头中已有引用。

编辑：抱歉，我在复制和粘贴代码时出错，确实存在缺少的'）'，但仍然存在问题。

Answer 1

添加一个)，因为错误消息清楚显示。

$(document).ready( function() {
   $('#home-pro-slider').show();
})

Answer 2

您输入错误，缺少准备功能的)

$(document).ready( function() {
  $('#home-pro-slider').show();
});

Answer 3

缺少关闭标签

$(document).ready( function() {
  $('#home-pro-slider').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
  $('#home-pro-slider').show();
});
</script>

<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs" style="display:none;">



</div>
</div>
</div>

Answer 4

编辑：我刚刚阅读了您的编辑，您面临的问题是jQuery初始化不正确。您必须先定义您的jQuery-Script-Tag ，然后再使用其他脚本，如下所示：

<head>
   .
   css and meta info
   .
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="myScript.js"></script>
</head>

我还想补充一点，您应该始终分隔代码。 CSS属于一个单独的CSS文件，并且不是内联。 javascript也属于一个单独的文件，并且text/javascript或application/javascript标签已被弃用，应将其排除在外。

如下所示：它确实起作用，但是由于div为空，因此您看不到任何内容。如果您在初始化div之前以某种方式加载了javascript，则可能无法找到它，但是使用$(document).ready()可能不是这种情况。

$(document).ready( function() {
  $('#home-pro-slider').show();
});

#home-pro-slider {
  display: none;
  background-color: red;
  width: 30px;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container nopadding">
  <div class="row">
    <div id="home-pro-slider" class="slider-pro bsnojs">

    </div>
  </div>
</div>

使用CSS隐藏后，div不会再使用jQuery .show（）出现

4 个答案: