javascript 没有在 html 上工作

Question

我是 html 和 javascript

的新手

我从 codecademy 复制了这些代码，但它们运行不正常。我希望有人可以向我解释为什么 javascript 在我的 html 中不起作用。非常感谢！

index.html

<html>
<head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>

</head>
<body>
<div class="menu">

  <!-- Menu icon -->
  <div class="icon-close">
    <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
  </div>

  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<!-- Main body -->
<div class="jumbotron">
  <div class="icon-menu">
    <i class="fa fa-bars"></i>
    Menu
  </div>
</div>
<script src="app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>

app.js

var main=function(){

$('.icon-menu').click(function(){
    $('.menu').animate({left:'0px'},200);
    $('body').animate({left:'285px'},200);
    });

$('.icon-close').click(function(){
    $('.menu').animate({left:'-285px'},200);
    $('body').animate({left:'0px'},200);
});
};

$(document).ready(main);

Answer 1

改变

<script src="app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

到

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>

app.js 中的代码是使用 jQuery 编写的。即使您需要 jQuery、$，但在您的 app.js 中，您已经包含了 script tag，以便在 app.js 之后包含 jQuery。

因此，当您的 app.js 加载时，您仍然没有 jQuery，因此您的脚本失败。

解决方案是先包含 jQuery，然后再包含您的 app.js。

javascript 没有在 html 上工作

javascript isn't working on html

html

javascript