javascript在html上不起作用

Question

我是HTML和javascript的新手

我從codecademy復制了這些代碼，但是效果不佳。 我希望有人可以向我解釋為什么我的html中的javascript無法正常工作。 非常感謝！

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您已經在app.js之后script tag了jQuery script tag 。

因此，當您加載app.js時，您仍然沒有jQuery因此腳本失敗。

解決方案是先包含jQuery ，然后包含app.js

javascript在html上不起作用

問題描述

1 個解決方案

解決方案1
4 已采納 2015-01-05 03:36:39

javascript在html上不起作用

問題描述

1 個解決方案

解決方案1 4 已采納 2015-01-05 03:36:39

解決方案1
4 已采納 2015-01-05 03:36:39