Javascript не работает, как в codepen

-7

Итак, я взял этот код: http://codepen.io/yuki-san/pen/eJqLNO, чтобы попытаться узнать и понять, как это работает. У меня есть этот код:Javascript не работает, как в codepen

<!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 файлы равны codepen. Но javascript ничего не делает, как в кодеде, и я не могу понять, почему. Css работает, у меня есть папка правильно и имя файла, так что чего не хватает? Спасибо за помощь.

источник

2016-12-26 dasdasd

Загрузить библиотеку Jquery первой и после нагрузки других JS .. –

Используйте [консоль браузера] (http://webmasters.stackexchange.com/q/8525) и прочитайте ошибки. – Xufox

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>

источник

2016-12-26 12:35:24 Curiousdev

Так что я попробовал, а потом не работал. В отладке он дает ошибку: «ReferenceError: $ не определен». Я искал эту ошибку, и решение состоит в том, чтобы иметь код так же, как вы сделали здесь ... – dasdasd

попробуйте использовать ** https ** вместо ** http **, чтобы получить jquery из ** cdn ** как i обновили свой ответ, посмотрим, надеюсь, что это сработает – Curiousdev

Ошибка исчезнет, но код не работает. Пробовал другой браузер (firefox и chrome) и ничего. – dasdasd

Поскольку ваш sections.js начинается до того загружено Jquery, попробуйте использовать этот head:

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

источник

2016-12-26 12:35:51

тот же ответ, который я дал в другом ответе, Так что я попробовал, а потом не работал. В отладке он дает ошибку: «ReferenceError: $ не определен». Я искал эту ошибку, и решение состоит в том, чтобы иметь код так же, как вы сделали здесь ... – dasdasd

@dasdasd, «ReferenceError: $ is not defined» означает, что jQuery не импортируется должным образом, когда ваш пользовательский скрипт начинает выполнение –

Javascript не работает, как в codepen

ответ

Смежные вопросы