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

如果这不是问题，您应该在线添加问题的复制品，否则没有人能够知道问题所在，以及如何帮助您。

JS：fullpage.js moveTo（）在不同的部分之间

1 个答案: