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包括在jQuery之后包含app.js。

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

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

javascript并不是在使用html

1 个答案: