Question

我一直在尝试按照本教程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 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 section3">
        <div class="container">
            <h1>Section 3</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 section4">
        <div class="container">
            <h1>Section 4</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>

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

Answer 1

这是您代码中的有效演示。我认为您在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 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 section3">
        <div class="container">
            <h1>Section 3</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 section4">
        <div class="container">
            <h1>Section 4</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>

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

Fullpage.js jQuery代码无法按预期运行HTML页面

1 个答案: