Javascript不像codepen那样工作
所以我拿了这个密码笔：试图学习和理解它是如何工作的。 我有以下代码：Javascript不像codepen那样工作,javascript,jquery,html,Javascript,Jquery,Html,所以我拿了这个密码笔：试图学习和理解它是如何工作的。 我有以下代码： <!DOCTYPE html> <html lang="pt-PT"> <head> <meta charset="UTF-8"> <title>Portfólio</title> <link rel="stylesheet" type="text/css" href="styles/layout.css"/>
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8">
<title>Portfólio</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css"/>
<script type="text/javascript" src="scripts/sections.js"></script>
</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>
波尔图
第一
第二
第三
第四
第五
css和javascript文件等同于代码笔。但是javascript没有做任何事情，就像它在代码笔中做的那样，我无法理解为什么。css工作正常，我有正确的文件夹和文件名，那么缺少什么呢？感谢您的帮助。jQuery必须位于插件js的顶部。在您的情况下，部分js其他明智的部分js将无法获得jQuery，并且您的功能将无法按预期工作。 按如下所示更新代码以获得所需的输出
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8">
<title>Portfólio</title>
<script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sections.js"></script>
<link rel="stylesheet" type="text/css" href="styles/layout.css"/>
<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>
</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>
</body>
</html>
波尔图
var sections=$（“section”）
，资产净值=$（“资产净值”）
，nav_height=nav.outerHeight（）；
$（窗口）.on（'scroll'，函数（）{
var cur_pos=$（this.scrollTop（）；
节。每个（函数（）{
var top=$（this）.offset（）.top-导航高度，
bottom=top+$（this.outerHeight（）；
如果（cur_pos>=top&&cur_pos是因为您的sections.js
在jQuery加载之前启动，请尝试使用此头
：
<head>
<meta charset="UTF-8">
<title>Portfólio</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css"/>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sections.js"></script>
</head>
波尔图
Load jquery library first and after Load other js..使用并读取错误。因此我尝试了它，但没有成功。在调试中，它给出了一个错误：“ReferenceError:$未定义”。我搜索了该错误，解决方案是以与您在此处所做相同的方式使用代码…尝试使用https而不是http从cdn获取jquery，因为我已更新了我的答案。请看一看，希望它会起作用错误消失，但代码不起作用。尝试了其他浏览器（firefox和chrome）在脚本标记中添加javascript代码以使其工作我已经更新了我的答案以及我在其他答案中给出的答案，所以我尝试了它，但没有工作。在调试中，它给出了一个错误：“ReferenceError:$未定义”。我搜索了该错误，解决方法是以与您在此处所做相同的方式使用代码…@dasdasd，“ReferenceError:$未定义”意味着当自定义脚本开始执行时，jQuery未正确导入