Question

考虑以下代码：

site__header.html

<ul id="anchor__links" class="anchor__links">
  <li data-menuanchor="section1" class="active"><a href="#section1">Intro</a></li>
  <li data-menuanchor="section2"><a href="#section2">What I Love</a></li>
  <li data-menuanchor="section3"><a href="#section3">What I Do</a></li>
  <li data-menuanchor="section4"><a href="#section4">My Works</a></li>
  <li data-menuanchor="section5"><a href="#section5">My Blog</a></li>
  <li data-menuanchor="section6"><a href="#section6">Get In Touch</a></li>
</ul>

home.html的

---
layout: page
class: home
permalink: /
title: Home
navigation_match: /
---

<article id="fullpage">
    <div class="section article__section" id="sec__1">
    </div>
    <div class="section article__section" id="sec__2">
    </div>
    <div class="section article__section" id="sec__3">
    </div>
    <div class="section article__section" id="sec__4">
    </div>
    <div class="section article__section" id="sec__5">
    </div>
    <div class="section article__section" id="sec__6">
    </div>
</article>

main.js

jQuery(document).ready(function() {
  // Enable FullpageJS
  jQuery('#fullpage').fullpage({
    scrollBar: false,
    keyboardScrolling: true,
    fitToSection: true,
    css3: true,
    scrollingSpeed: 800,
    fixedElements: '#header, .slide__indicator',
    anchors: ['section1', 'section2', 'section3', 'section4', 'section5', 'section6'],
    menu: '#anchor__links'
  });
});

以下是我的问题的录制演示。的 https://www.screencast.com/t/nFKRtFC9Ep

我遇到的问题是当我尝试点击页面顶部的菜单项时菜单无法正常工作。当我点击按钮时，没有任何事情像页面部分转换（例如从第1部分转换到第2部分），但是，当我向下滚动其余页面时，活动菜单项从一个项目转换到另一个项目，因为它应该是。关于具有自己ID的部分，我不想删除它们，因为我对每个部分都有特定的样式。

FullPage.js中的data-menuanchor在Jekyll模板中无法正常工作

0 个答案: