JavaScript 无法在 HTML 上运行

javascript isn't working on html

本文关键字：运行 HTML JavaScript      更新时间：2023-09-26

我是html和javascript的新手

我从 codecademy 复制了这些代码，但它们效果不佳。我希望有人能向我解释为什么javascript不能在我的html中工作。非常感谢！

索引.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>

应用.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);

更改

<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。

相关文章：