javascript - how to link js to html file? - Stack Overflow

admin2025-04-26 7

I have the following HTML code

<!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/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src=".1.3/jquery.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</body>

And following is the js file I want to link, Filename is 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");

});

I also have CSS file which I am able to link successfully. But, java scripts are not linking at all. I'm not sure which js files are not linking i.e., The online js files or javas.js local file. I'm using sublime Text 3

I have the following HTML code

<!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./ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</body>

And following is the js file I want to link, Filename is 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");

});

Share Improve this question edited May 26, 2017 at 14:28 Borja Perez 31 silver badge7 bronze badges asked May 26, 2017 at 13:13 Kiran JD 5716 silver badges15 bronze badges

jquery.min.js must be first in order as code in other files is dependent on jQuery . – Mohammad Usman Commented May 26, 2017 at 13:14
@MohammadUsman tried it, No effect – Kiran JD Commented May 26, 2017 at 13:15
By the way, where is the head section in your document? – Mohammad Usman Commented May 26, 2017 at 13:17
2 "But, java scripts are not linking at all" — How are you establishing this? Have you used the Developer Tools in the browser? Have you checked the Network tab? Is a request being made for the JS files? Are they getting responses? Do the responses give you 200 OK statuses? What about the Console? Does it show any error messages? – Quentin Commented May 26, 2017 at 13:17
Use a validator, a <link> can't go inside the <body> and the <title> is missing. – Quentin Commented May 26, 2017 at 13:18

| Show 3 more ments

2 Answers 2

Sorted by: Reset to default 2

<!DOCTYPE html>
<head>
<link rel = "stylesheet" type = "text/css" href = "stylesheet.css" />
<script type="text/javascript" src="https://code.jquery./jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http:///ajax.googleapis./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>

try this it will work i guess

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./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http:///ajax.googleapis./ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</body>
</html>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745665451a313001.html

javascripthow to link js to html fileStack Overflow

最新回复(0)