Fullpage.js navigation one item won't get active

StackOverflow https://stackoverflow.com/questions/20635696

문제

I have used the fullPage.js script on my website and I used the menu function which detects the active page. Unfortunately I am not able to successfully add pages to the menu.

The list items show up but don't get an active state on the 4thPage when you scroll over them. I'm also unsure why the script uses firstPage etc for some items and 3rdPage for others. It can't detect the 4thPage or 5thPage but it can detect 3rdPage? What are the correct names for those 4th and 5th pages?

I currently have this in my code;

<script type="text/javascript">
        $(document).ready(function() {
            var pepe = $.fn.fullpage({
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thPage' , 'lastPage'],
                menu: '#menu'
            });

        });
    </script>
</head>
<body>

<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage"><h3>Ruimtevaart</h3></a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage"><h3>Home</h3></a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage"><h3>Informatie</h3></a></li>
    <li data-menuanchor="4thPage"><a href="#4thPage"><h3>Werkwijze</h3></a></li>
    <li data-menuanchor="5thPage"><a href="#5thPage"><h3>Referenties</h3></a></li>
    <li data-menuanchor="lastPage"><a href="#lastPage"><h3>Contact</h3></a></li>
</ul>

And my sections are called section0 section1 etc. So I have section 0-5. Before I had this and this worked until I added the extra sections;

<script type="text/javascript">
        $(document).ready(function() {
            var pepe = $.fn.fullpage({
                anchors: ['firstPage', 'secondPage', '3rdPage', 'lastPage'],
                menu: '#menu'
            });

        });
    </script>
</head>
<body>

<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage"><h3>Home</h3></a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage"><h3>Informatie</h3></a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage"><h3>Werkwijze</h3></a></li>
    <li data-menuanchor="lastPage"><a href="lastPage"><h3>Contact</h3></a></li>
</ul>

Why is this 4th page not showing up? The names are the same and stated everywhere. Am I overlooking something?

My full code is here; http://kellyvuijst.nl/FINAL/ in case anyone needs it.

도움이 되었습니까?

해결책

You are forgetting to add the # on the lastPage link of your menu. Also, don't forget that you still have to add the sections to your site <div class="section">.....</div>.

Update: Your anchor is 4thpage and the link is 4thPage. See the difference in the P. Once is in uppercase and the other is not.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top