2016-09-28 5 views
1

fullpage.jsスクリプトを使用して複数のページを作成しました。これはうまく動作するプラグインです。私は、あるページに複数のサブセクションがあり、関連するページにリンクするためにアンカーナビゲータが必要で、ページに複数のサブセクションがある場合、それらのセクションをスクロールするなどのシナリオがあります。私が最初のセクションは、それが最初のセクションに行くNAVに私はそれが第二のセクションに行く第二のセクションをクリックした場合、私は...クリックすると、この例では例http://codepen.io/anon/pen/EgXbWjfullpage.jsスクリプトを使用しているサブセクションのページ

を設定しているだけで簡単にするために

...

私はそれが私はそれがこのようなシナリオで動作させることができますどのように

あるSection Threeに行きたいしながら、それはSection Two sub page oneセクションに私を取るNAV

今私は3番目のセクションをクリックした場合。

<div id="fullpage"> 
    <div class="section">Section One</div> 
    <div class="section">Section Two</div> 
     <div class="section">Section Two sub page one</div> 
     <div class="section">Section Two sub page two</div> 
    <div class="section">Section Three</div> 
    <div class="section">Section Four</div> 
</div> 

<ul id="myMenu"> 
    <li data-menuanchor="firstPage" class="active"><a href="#page1">First section</a></li> 
    <li data-menuanchor="secondPage"><a href="#page2">Second section</a></li> 
    <li data-menuanchor="thirdPage"><a href="#page3">Third section</a></li> 
    <li data-menuanchor="fourthPage"><a href="#page4">Fourth section</a></li> 
</ul> 



$('#fullpage').fullpage({ 
    anchors: ['page1', 'page2', 'page3', 'page4'], 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    menu: '#myMenu' 
}); 

答えて

1

管理対象とするにはワーキングコード。 http://codepen.io/anon/pen/JRJOkb

<div id="fullpage"> 
    <div class="section" data-anchor="one">Section One</div> 
    <div class="section" data-anchor="two">Section Two</div> 
     <div class="section">Section Two sub page one</div> 
     <div class="section">Section Two sub page two</div> 
    <div class="section" data-anchor="three">Section Three</div> 
    <div class="section" data-anchor="four">Section Four</div> 
</div> 

<ul id="myMenu"> 
    <li data-menuanchor="firstPage" class="active"><a href="#one">First section</a></li> 
    <li data-menuanchor="secondPage"><a href="#two">Second section</a></li> 
    <li data-menuanchor="thirdPage"><a href="#three">Third section</a></li> 
    <li data-menuanchor="fourthPage"><a href="#four">Fourth section</a></li> 
</ul> 

$('#fullpage').fullpage({ 
    anchors: ['one', 'two', 'a1','a2','three', 'four'], 
    sectionsColor: ['yellow', 'orange', 'orange', 'orange','#C0C0C0', '#ADD8E6'], 
    menu: '#myMenu' 
}); 
関連する問題