admin管理员组

文章数量:1026989

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");

});

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

  • javascript
  • jquery
  • html
  • css
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 JDKiran JD 5716 silver badges15 bronze badges 8
  • 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

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>

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");

});

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

  • javascript
  • jquery
  • html
  • css
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 JDKiran JD 5716 silver badges15 bronze badges 8
  • 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

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>

本文标签： javascripthow to link js to html fileStack Overflow

版权声明：本文标题：javascript - how to link js to html file? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745665447a2162148.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。