Question

我有以下HTML代码

<!DOCTYPE html>
<body>
<link rel = "stylesheet"
   type = "text/css"
   href = "stylesheet.css" />
<div id="bg"></div>
<h2>Kiran Murthy JD</h2>
<section>
  <nav>
    <div></div>
    <ul>
      <li data-xcoord="0px" class="active">About</li>
      <li data-xcoord="160px">Portfolio</li>
      <li data-xcoord="320px">Contact</li>
      <!--<li data-xcoord="480px">Store</li>-->
    </ul>
  </nav>
</section>
<script type="text/javascript" src="http:///ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</body>

以下是我要链接的js文件，Filename是javas.js

$("nav ul li").click(function(){
  var xcoord = $(this).data("xcoord");

  $("nav div").stop().animate({marginLeft:xcoord}, 400, "easeInOutExpo");
  $(this).addClass("active");
  $("nav ul li").not(this).removeClass("active");

});

我也有CSS文件，我能够成功链接。但是，java脚本根本没有链接。我不确定哪些js文件没有链接，即在线js文件或javas.js本地文件。 我正在使用sublime Text 3

Answer 1

<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "stylesheet.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http:///ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</head>
<body>

<div id="bg"></div>
<h2>Kiran Murthy JD</h2>
<section>
  <nav>
    <div></div>
    <ul>
      <li data-xcoord="0px" class="active">About</li>
      <li data-xcoord="160px">Portfolio</li>
      <li data-xcoord="320px">Contact</li>
      <!--<li data-xcoord="480px">Store</li>-->
    </ul>
  </nav>
</section>
</body>

试试这个我会猜测

Answer 2

You should be changed scripts sequence.


 <!DOCTYPE html>
<html>
<body>
<link rel = "stylesheet"
   type = "text/css"
   href = "stylesheet.css" />
<div id="bg"></div>
<h2>Kiran Murthy JD</h2>
<section>
  <nav>
    <div></div>
    <ul>
      <li data-xcoord="0px" class="active">About</li>
      <li data-xcoord="160px">Portfolio</li>
      <li data-xcoord="320px">Contact</li>
    </ul>
  </nav>
</section>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http:///ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</body>
</html>

如何将js链接到html文件？

2 个答案: