Question

所以我拿了这个代码：http://codepen.io/yuki-san/pen/eJqLNO来尝试学习并理解它是如何工作的。我有这段代码：

<!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并没有做任何事情，就像它在codepen中那样，我无法理解为什么。 css工作，我有正确的文件夹和文件的名称，所以缺少什么？谢谢你的帮助。

Answer 1

jQuery必须位于插件js的顶部 section 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>

Answer 2

因为您的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>

Javascript在codepen中不起作用

2 个答案: