javascript - JS : fullpage. 不同部分之间的 js moveTo()

Question

上下文:

我试图通过单击 5 个元素之一在 fullpage.js 的一个部分中的不同幻灯片之间移动。

问题:

第一个 moveTo() - 从第一张幻灯片到其他 4 张幻灯片中的任何一张都完美无缺。但是，一旦在任何其他幻灯片上，我无法通过单击任何元素导航到其他幻灯片。任何帮助将不胜感激!

我的 JS:

$(document).ready(function() {


  // move to quality
  $( "#q" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 1);
  });

  $( "#d" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 2);
  });

  $( "#p" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 3);
  });

  $( "#z" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 4);
  });

  $( "#e" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 5);
  });


  });


  $('#fullpage').fullpage({
      css3: true,
      sectionsColor: ['white', 'grey', '#fff', '#fff'],
      anchors:['m', 'why',],
      navigation: true,
      navigationPosition: 'right',
      // verticalCentered:false
      // 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
      // 'showActiveTooltip': true,

    }

  );

我的 Html:

<div id="fullpage" class="fullpage-wrapper">



  <div class="section" id="section1">
    <div class="slide" id="slide1-1">
    </div>   <!-- End slide -->
  </div>


  <!-- Start section 2 - why  -->

  <div class="section" id="section2">

    <div class="slide" id="slide2-1"> <!-- Start Why  -->
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12">
                <h2 class="master-side side-default"><span>Why ?</span></h2>
                <div class="col-md-8 col-center">
                    <a id="q" class="square img-thumbnail"> </a>
                    <a id="d" class="square"> </a>
                    <a id="p" class="square"> </a>
                    <a id="d" class="square"> </a>
                    <a id="e" class="square"> </a>
                </div>

            </div> <!-- End col-md-12 -->
          </div> <!-- End Row -->

        </div>   <!-- End Container -->
      </div> <!-- End  Why  -->

      <div class="slide" id="slide2-2"> <!-- Start Quality -->
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12">
                  <h2><span>Quality</span></h2>
                  <div class="col-md-8 col-center">
                      <a id="q" class="square img-thumbnail"> </a>
                      <a id="d" class="square"> </a>
                      <a id="p" class="square"> </a>
                      <a id="d" class="square"> </a>
                      <a id="e" class="square"> </a>
                  </div>
              </div> <!-- End col-md-12 -->
            </div> <!-- End Row -->

          </div>   <!-- End Container -->
        </div> <!-- End Quality -->

Answer 1

您的 javascript 控制台中没有任何错误吗？

在您发布的代码中，这里有一个错误:

  // move to quality
  $( "#q").click(function() {
      $.fn.fullpage.silentMoveTo('why', 1);
  });

您忘记关闭字符串 "#q" .

此外，您不能拥有多个 id具有相同值的元素......你不能有两个<a id="d" class="square"> </a>就像你现在做的那样。

如果那不是问题所在，您应该在线添加问题的重现，否则没有人能够知道问题出在哪里以及如何帮助您。