Javascript不能像codepen那樣工作

-7

所以我拿這個codepen：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庫.. –

使用[瀏覽器控制檯]（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 **從** cdn **獲取jquery，因爲我已更新我的答案看看希望它會工作 – Curiousdev

錯誤消失，但代碼不起作用。試過其他瀏覽器（firefox和chrome），沒有任何東西。 – dasdasd

因爲你sections.js開始了jQuery加載之前，嘗試使用這個head：第一，負載等JS後

<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：$未定義」表示，當您的自定義腳本開始執行時，jQuery沒有正確導入 –

Javascript不能像codepen那樣工作

回答

相關問題