Fullpage.js navigation one item won't get active

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

Pergunta

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.

Foi útil?

Solução

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top