如何将我的javascript链接到此html以工作_Javascript_Html

如何将我的javascript链接到此html以工作

javascript html

如何将我的javascript链接到此html以工作,javascript,html,Javascript,Html,我是一个新的编码，目前在这个网站上工作，我不能让我的javascript工作。javascript用于使不同部分之间的转换平滑而漂亮。如果你们能帮我，那就太棒了。我知道问题可能很简单，但请帮助一个需要帮助的人 HTML: <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title><!-- Insert your titl

我是一个新的编码，目前在这个网站上工作，我不能让我的javascript工作。javascript用于使不同部分之间的转换平滑而漂亮。如果你们能帮我，那就太棒了。我知道问题可能很简单，但请帮助一个需要帮助的人

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:

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

使用标签。将JS代码放在html页面的这些脚本之间。那就行了

另一种干净的方法是使用单独的JavaScript文件。例如，将其命名为hello.js。然后在html的标记中，将这一行链接到JavaScript文件

<script src="hello.js"></script>

将其放入文件ie myfile.js中，并将其绑定到html，如：

<script src="script/myfile.js"></script>

还是就这么做

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

我想您应该添加jQuery代码，但在以正确的方式调用它时遇到了问题。您可以执行以下操作

1.在以下内容中介绍您的JS代码

$document.readyfunction{ //你的密码在这里 };

或

jQuerydocument.readyfunction${ //你的密码在这里 };

2将JavaScript/jQuery代码放入.js文件中

3将jQuery库文件之后的文件调用到HTML代码中

e、 g

您还可以将代码放入HTML文件本身的标记中，而不是创建单独的JS。然而，在这两种情况下，最主要的是应该首先加载jQuery库，以便jQuery代码可以运行

注意：我没有检查你的JS代码逻辑，我刚刚就如何使用此JS代码给出了说明。

Java和JavaScription之间有一个HUUUGE差异。打开Firefox和Chrome都支持的开发人员控制台，看看您的Javascript加载是否正常，是否有任何其他错误或类似错误。您可以调试Javascript或添加console.log来找出任何错误

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

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">           
</script>

<script src="pathto/yourfile.js">           
</script>