我如何将我的JavaScript链接到此html才能工作
[英]How do I link my javascript to this html to work
问题描述
I am a new to coding and currently working on this website and I can't get my javascript to work. 
我是编码的新手，目前正在该网站上工作，但我的JavaScript无法正常工作。 The javascript is used to make the transitions between the different sections smooth and nice. javascript用于使不同部分之间的过渡平滑而美观。 It would be really awesome if you guys could help me. 如果你们能帮助我，那将真的很棒。 I know the problem is probably very simple but please help out a noobie in need. 我知道问题可能很简单，但请帮助需要帮助的人。 :) :)
HTML: HTML：
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title><!-- Insert your title here --></title>
</head>
<body>
<nav>
<ul>
<li><a href="#1">First</a></li>
<li><a href="#2">Second</a></li>
<li><a href="#3">Third</a></li>
<li><a href="#4">Fourth</a></li>
<li><a href="#5">Fifth</a></li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</body>
</html>
javascript: javascript：
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);
return false;
});
3 个解决方案
解决方案1
0 2014-10-07 16:42:34
Use <script></script> tags. 使用<script></script>标签。 put your JS code between these scripts on your html page. 将您的JS代码放在html页面上的这些脚本之间。 It shall work then. 它将开始工作。
Another clean approach is to use make a separate file of JavaScript. 另一种干净的方法是使用制作单独的JavaScript文件。 Name it for example hello.js. 将其命名为例如hello.js。 Then in <head> tag of your html, put this line to link to your JavaScript file. 然后在html的<head>标记中，将该行链接到您的JavaScript文件。
<script src="hello.js"></script>
解决方案2
0 2014-10-07 16:45:16
put it in a file ie myfile.js and bind it to your html like: 将其放在文件myfile.js然后将其绑定到html上，如下所示：
<script src="script/myfile.js"></script>
and make sure that you add the jquery lib before the script 并确保在脚本之前添加jquery lib
full code 完整的代码
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title><!-- Insert your title here --></title>
</head>
<body>
<nav>
<ul>
<li><a href="#1">First</a></li>
<li><a href="#2">Second</a></li>
<li><a href="#3">Third</a></li>
<li><a href="#4">Fourth</a></li>
<li><a href="#5">Fifth</a></li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<script src="script/myfile.js"></script>
</body>
</html>
or just do this 或者只是这样做
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title><!-- Insert your title here --></title>
</head>
<body>
<nav>
<ul>
<li><a href="#1">First</a></li>
<li><a href="#2">Second</a></li>
<li><a href="#3">Third</a></li>
<li><a href="#4">Fourth</a></li>
<li><a href="#5">Fifth</a></li>
</ul>
</nav>
<div class="sections">
<section id="1"><h1>First</h1></section>
<section id="2"><h1>Second</h1></section>
<section id="3"><h1>Third</h1></section>
<section id="4"><h1>Fourth</h1></section>
<section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<script>
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);
return false;
});
</script>
</body>
</html>
解决方案3
0 2014-10-07 16:51:26
I think you went to add a jQuery code but stuck while calling it in proper way. 我认为您去添加了jQuery代码，但在以正确方式调用它时却卡住了。 You can do the following. 您可以执行以下操作。
1) Cover your JS code within 1）覆盖您的JS代码
$(document).ready(function(){ //your code goes here });
OR 要么
jQuery(document).ready(function($){ //your code goes here });
2) Put your JavaScript/jQuery code in a .js file. 2）将您的JavaScript / jQuery代码放入.js文件中。
3) Call that file after the jQuery library file into your HTML code. 3）将jQuery库文件之后的文件调用到您的HTML代码中。
eg 例如
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<script src="pathto/yourfile.js">
</script>
You can also put your code inside <script></script> tags in the HTML file itself rather than creating a separate JS. 您也可以将代码放在HTML文件本身的<script></script>标记内，而不用创建单独的JS。 However, in either case, the main thing is that the jQuery library should be loaded first, so that your jQuery code can run. 但是，无论哪种情况，最主要的是应该首先加载jQuery库，以便可以运行jQuery代码。
NOTE: I have not checked your JS code logic, I have just given instruction over how you should use this JS code to work. 注意：我没有检查过您的JS代码逻辑，我只是给出了有关如何使用此JS代码工作的说明。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.