html - Uncaught ReferenceError : $ is not defined (For the Scrollspy effect)

Question

试图让我的 scrollspy 工作。我将代码从 https://codepen.io/emiemi/pen/jAkvxV 复制到我的原子文本编辑器中到我的桌面，现在导航菜单不起作用，但鼠标滚动有效。

我该如何解决这个问题？ 即使运行代码片段有效，但当我尝试从我的桌面打开它时它不起作用。 这是我的桌面在 Chrome 开发模式下的错误。 (见下文)

//MENU SCROLL
$(".menu a").click(function() {
  //on click, we get the target value of the selected element
  var target = $(this).attr('target');
  //we then scroll our body until the top of the corresponding div in 700ms
  var mh = $('.menu').height();
  $('body').animate({
    scrollTop: $("#" + target).offset().top - mh
  }, 700);
});

//SCROLLSPY
function scrollSpy() {
  var mh = $('.menu').height();
  $('#landing').css("padding-top", mh + "px");

  $(".menu a").removeClass("active"); //we remove active from every menu element

  //we get the divs offsets looping the menu links and getting the targets (this is dynamic: when we change div #suzy's height, code won't break!)
  var divs = [];
  $(".menu a").each(function(i) {
    var appo = $(this).attr("target");
    //here we get the distance from top of each div
    divs[i] = $("#" + appo).offset().top;
  });

  //gets actual scroll and adds window height/2 to change the active menu voice when the lower div reaches half of screen (it can be changed)
  var pos = $(window).scrollTop();
  var off = ($(window).height()) / 2;

  pos = pos + off;

  //we parse our "div distances from top" object (divs) until we find a div which is further from top than the actual scroll position(+ of course window height/2). When we find it, we assign "active" class to the Nth menu voice which is corresponding to the last div closer to the top than the actual scroll -> trick is looping from index=0 while Nth css numeration starts from 1, so when the index=3 (fourth div) breaks our cycly, we give active to the third element in menu.
  var index = 0;

  for (index = 0; index < divs.length; index++) {
    if (pos < divs[index]) {
      break;
    }
  }
  index--;
  $(".menu li:eq(" + index + ") a").addClass("active");
};

$(window).scroll(function() {
  scrollSpy();
});
$(document).ready(function() {
  scrollSpy();
});

//suzy div height click
$('#expander').click(function() {
  $("#suzy").toggleClass('aug');
});

/*JUST STYLE....*/


/*MENU*/

.menu {
  font-family: Raleway;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  background: #53346D;
  transition: all .3s;
  text-align: center;
}

.menu ul {
  padding: 0;
  list-style-type: none;
  display: inline-block;
  margin: 0;
}

.menu ul li {
  display: inline-block;
  font-size: 1.1em;
}

.menu ul li a {
  display: block;
  padding: 20px 20px;
  color: #fdfdfd;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all.3s;
}

.menu ul li a:hover,
.menu ul li a.active {
  text-decoration: none;
}

.menu ul li a:focus {
  outline: 0!important;
  text-decoration: none;
}

.menu ul li a.active {
  border-color: #fafafa;
}


/*DIVS*/

.main {
  padding-top: 45px;
  text-align: center;
}

h1 {
  color: #fafafa;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-family: Galada;
  font-weight: 400;
  font-size: 3em;
}

.main div {
  position: relative
}

#landing {
  min-height: 100vh;
  background: #00d2ff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #00d2ff, #928DAB);
  background: linear-gradient(to left, #00d2ff, #928DAB);
}

#suzy {
  min-height: 120vh;
  background: #B24592;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #B24592, #F15F79);
  background: linear-gradient(to left, #B24592, #F15F79);
  transition: all.5s;
}

#suzy.aug {
  min-height: 240vh;
}

#night {
  min-height: 180vh;
  background: #2c3e50;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #2c3e50, #3498db);
  background: linear-gradient(to left, #2c3e50, #3498db);
}

#park {
  min-height: 150vh;
  background: #AAFFA9;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #AAFFA9, #11FFBD);
  background: linear-gradient(to left, #AAFFA9, #11FFBD);
}

#expander {
  background: #fafafa;
  padding: 20x;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin-top: 30px;
}

#expander h2 {
  color: #B24592;
  font-family: Raleway;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cannon</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="javascript.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

<body>

  <!-- ____________________________________________ Nav Bar ____________________________________________ -->

  <div class="menu">
    <ul>
      <li><a target="landing">landing</a></li>
      <li><a target="suzy">suzy</a></li>
      <li><a target="night">night</a></li>
      <li><a target="park">park</a></li>
    </ul>
  </div>

  <!-- ____________________________________________ End of nav bar ____________________________________________ -->

  <div class="main">

    <div id="landing">
      <h1>This is your first div</h1>
    </div>


    <div id="suzy">
      <h1>This is your second div</h1>
    </div>


    <div id="night">
      <h1>This is the third div</h1>
    </div>


    <div id="park">
      <h1>And this is the last div</h1>
    </div>

  </div>


</body>

</html>

Answer 1

脚本顺序错误，您必须首先包含 jQuery，因为您的脚本使用 jQuery。

改变这个:

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

为此:

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