如何解决Fullpage.js jQuery代码无法按预期运行HTML页面
我一直在尝试按照本教程here的操作，在9:08左右，他添加了javascript，然后显示fullpage.js可以正常工作，但是我放了新的页面后刷新了页面码。我在这里做错什么了吗？
谢谢。
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="css/fullpage.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<div id="fullpage">
<div class="section section1">
<div class="container">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis,vehicula libero porta,auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit,et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus,suscipit odio nec,consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section2">
<div class="container">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet,consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section3">
<div class="container">
<h1>Section 3</h1>
<p>Lorem ipsum dolor sit amet,consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section4">
<div class="container">
<h1>Section 4</h1>
<p>Lorem ipsum dolor sit amet,consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="js/fullpage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
//options here
autoScrolling:true,scrollHorizontally: true,navigation: true
});
});
</script>
</body>
</html>
解决方法
这是您代码中的有效演示。我认为您在fullpage.js库文件中遇到了问题。在fullpage.js的最新版本（3及更高版本）中，它已将其许可证更改为GPLv3，并且需要一个licenseKey选项。 Read more here
因此，请检查您的控制台，如果发现此类警告，请获取licensekey或降级您的库版本。
$(document).ready(function(){
$('#fullpage').fullpage({
//options here
autoScrolling:true,scrollHorizontally: true,navigation: true
});
});
/**
* EXTRA JS CODE
* Only for element background-color
*/
$(document).ready(function() {
$('.section').each(function () {
var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
$(this).css("background-color",hue);
});
});#fp-nav ul li a span {
background-color: orangered !important;
}
#fp-nav ul li a.active span {
background-color: red !important;
}<html>
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css">
</head>
<body>
<div id="fullpage">
<div class="section section1">
<div class="container">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Etiam vulputate metus ornare vestibulum vehicula. Mauris nec eros urna. In hac habitasse platea dictumst. Curabitur a odio sagittis,vehicula libero porta,auctor odio. Praesent a ultrices neque. Aliquam at tellus lectus. Sed tempus cursus justo sed tincidunt. Aenean quis bibendum velit,et auctor massa. Praesent tincidunt eu quam sed semper. Donec eu quam dapibus,suscipit odio nec,consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section2">
<div class="container">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet,consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section3">
<div class="container">
<h1>Section 3</h1>
<p>Lorem ipsum dolor sit amet,consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
<div class="section section4">
<div class="container">
<h1>Section 4</h1>
<p>Lorem ipsum dolor sit amet,consectetur lectus. Maecenas scelerisque nec velit eu tincidunt. </p>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!--- Default Library - v2.9.7
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。