使用 CSS 隐藏后，Div 没有使用 jQuery .show() 重新出现答案

【问题标题】：Div not reappearing using jQuery .show() after hiding with CSS使用 CSS 隐藏后，Div 没有使用 jQuery .show() 重新出现
【发布时间】：2018-06-27 08:15:43
【问题描述】：

我正在尝试隐藏一个 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>

我的控制台显示：

未捕获的引用错误：$ 未定义在（索引）：479

我相信这是因为我在运行这个 sn-p 之前没有加载 jQuery，但是据我所知，在运行这段代码之前，我的标题中有引用。

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

【问题讨论】：

检查控制台是否有任何错误。您在第 5 行缺少);，这可能是您的问题。
@NikkiMather 感谢您指出这一点，但是当我将代码复制到 stackoverflow 时这只是一个错误，我仍然有我的问题。
你试过加载功能吗？而不是准备好文件

标签： javascript jquery html css

【解决方案1】：

添加)，错误消息清楚地显示。

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

【讨论】：

【解决方案2】：

你有一个错字，错过了准备函数的)

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

【讨论】：

【解决方案3】：

编辑：我刚刚阅读了您的编辑，您面临的问题是 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-tags 已被弃用，应省略。

如下所示：它确实有效，但因为 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>

【讨论】：

【解决方案4】：

缺少结束标记

$(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>

【讨论】：