Question

我已经查看了几十个Stack Overflow问题并搜索了一千种不同的解决方案，而我似乎无法弄清楚问题。我是网络开发的总菜鸟，我只想让this simple page工作。有人可以告诉我我做错了什么吗？一个简单的解决方案可能是一个非常愚蠢的错误。我会提前道歉。谢谢！

我的HTML头：

  <head>
    <meta charset="utf-8">
    <title>Sheila Mary Daniels</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Local scripts and sheets -->
    <link rel="stylesheet" href="style.css">
    <script type = "text/javascript" src="script.js" charset="utf-8"></script>
    <!-- jQuery -->
    <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
    <!-- Bootstrap -->
    <script type = "text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <!-- Font Awesome -->
    <script src="https://use.fontawesome.com/7dd8dcb030.js"></script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Sofia" rel="stylesheet">
  </head>

我的CSS：

（效果很好）

body {
  margin-top: 60px;
  background-image: url("https://flowerillust.com/img/flower/flower-back0950.jpg");
  background-size: cover;
}

#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  height: 900px;
}

p {
  font-size: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}

#header {
  margin-bottom: 10px;
  font-size: 70px;
  color: Purple;
  font-family: Dancing Script;
  /* font-family: Sofia */
}

.scripture {
  font-family: Dancing Script;
  float: right;
  margin-right: 150px;
}

a:hover {
  text-decoration: underline;
}

我的JavaScript：

$(document).ready(function() {
  $("#header").hide().fadeIn(5000);
  $("#image").hide().fadeIn(5000);
});

我知道我的代码没有错，因为my CodePen工作得很好。我的CSS和我的JS都是外部文件。正如您所看到的，CSS完美无缺。不知道我在JS上做错了什么。

编辑：

我已根据评论建议重新排序了<link>和<script>代码，但仍然没有。

Answer 1

更改js文件的顺序

首先使用JQuery

<script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script type = "text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>

Answer 2

我猜你需要在bootstap.js文件之前添加Jquery。这可能是潜在的原因。只需重新排序即可。

<script type = "text/javascript"
     src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>

Answer 3

理想情况下，您希望首先包含jQuery，然后是bootstrap（或其他依赖于jQuery的下载脚本），然后是您的自定义脚本

所以就像这样

<!-- jQuery -->
    <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- jQueryUI -->
    <script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<!-- Bootstrap -->
    <script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<!-- Font Awesome -->
    <script src="https://use.fontawesome.com/7dd8dcb030.js"></script>
<!-- custom script -->
    <script type = "text/javascript" src="script.js" charset="utf-8"></script>

为什么我的jQuery脚本不起作用？

我的HTML头：

我的CSS：

我的JavaScript：

编辑：

3 个答案: