Question

我是一名刚接触编码的人，目前在这个网站上工作，我无法使用我的javascript工作。 javascript用于使不同部分之间的过渡平滑而美观。如果你们能帮助我，真的很棒。我知道问题可能很简单，但请帮助一个需要的noobie。：）

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

Answer 1

使用<script></script>标签。将您的JS代码放在html页面上的这些脚本之间。它应该工作。

另一种干净的方法是使用make一个单独的JavaScript文件。将其命名为hello.js。然后在您的html的<head>标记中，将此行链接到您的JavaScript文件。

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

Answer 2

将它放在一个文件即myfile.js中并将其绑定到您的html，如：

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

并确保在脚本

之前添加jquery lib

完整代码

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

或只是这样做

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

Answer 3

我认为你去添加一个jQuery代码但是在以适当的方式调用它时卡住了。您可以执行以下操作。

1）在

中覆盖你的JS代码

$(document).ready(function(){ //your code goes here });

OR

jQuery(document).ready(function($){ //your code goes here });

2）将您的JavaScript / jQuery代码放在.js文件中。

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

e.g。

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

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

您还可以将代码放在HTML文件本身的<script></script>标记内，而不是创建单独的JS。但是，在任何一种情况下，主要的是首先应该加载jQuery库，以便你的jQuery代码可以运行。

注意：我没有检查过你的JS代码逻辑，我刚刚给出了如何使用这个JS代码工作的指示。

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

3 个答案: