Блог

Главная - Вопросы по программированию - Fullpage.js Код Jquery не позволяет HTML-странице работать должным образом

Fullpage.js Код Jquery не позволяет HTML-странице работать должным образом

#html #jquery #bootstrap-4

#HTML #jquery #bootstrap-4

Вопрос:

Я пытался следовать этому руководству здесь, и примерно в 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>

Ответ №1:

Вот рабочая демонстрация вашего кода. Я думаю, у вас проблема с fullpage.js файл библиотеки. В последней версии (3 и выше) из fullpage.js он изменил свою лицензию на GPLv3, и для этого требуется licenseKey опция. Подробнее читайте здесь

Итак, проверьте свою консоль, и если вы обнаружили такие предупреждения, пожалуйста, установите 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>

Комментарии:

1. Спасибо за вашу помощь! Я загрузил версию 2.9.7 fullpage.js и веб-сайт работает безупречно.