Wewnętrznego linkami do dzieci na liście

Question

Korzystanie fullPage.js (przewijanie menu jQuery), mam następującą sytuację:

Mam listę nieuporządkowaną - źródło, które jest bazą danych SQL (PHP echo na zewnątrz).

Występują tylko dwa elementy na stronę.

Na górze strony, mam proste menu:

<a href="#theList:first-child">First Item</a> 
<a href="#theList:last-child">Second Item.</A> 

Chcę odwołuje się do pierwszej i drugiej pozycji na liście.

Przed PHP, mam następujący:

<a name="theList"> 

muszę założyć .. ale jak mam kierować różne dzieci na liście?

Zadziwiając mnie - jeśli ktokolwiek mógłby pomóc, byłbym bardzo wdzięczny!

Answer 1

Prawidłowy sposób korzystania fullPage.js powinno być:

1 .Have menu z data-menuanchor:

<ul id="menu"> 
    <li data-menuanchor="theList1"><a href="#theList1">First slide</a></li> 
    <li data-menuanchor="theList2"><a href="#theList2">Second slide</a></li> 
    <li data-menuanchor="theList3"><a href="#theList3">Third slide</a></li> 
    <li data-menuanchor="theList4"><a href="#theList4">Fourth slide</a></li> 
</ul> 

2 .config z JS: reguła anchors: ['theList1', 'theList2', 'theList3', 'theList4'],

3 .add CSS styl

$('#fullpage').fullpage({ 
 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
 
    anchors: ['theList1', 'theList2', 'theList3', 'theList4'], 
 
    menu: '#menu', 
 
    slidesNavigation: true 
 
});

@CHARSET "ISO-8859-1"; 
 
/* Reset CSS 
 
* --------------------------------------- */ 
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
 
form,fieldset,input,textarea,p,blockquote,th,td { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
a{ 
 
\t text-decoration:none; 
 
} 
 
table { 
 
    border-spacing: 0;  
 
} 
 
fieldset,img { 
 
    border: 0; 
 
} 
 
address,caption,cite,code,dfn,em,strong,th,var { 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 
strong{ 
 
\t font-weight: bold; 
 
} 
 
ol,ul { 
 
    list-style: none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
caption,th { 
 
    text-align: left; 
 

 
} 
 
h1,h2,h3,h4,h5,h6 { 
 
    font-weight: normal; 
 
    font-size: 100%; 
 
    margin:0; 
 
    padding:0; 
 
    color:#444; 
 
} 
 
q:before,q:after { 
 
    content:''; 
 
} 
 
abbr,acronym { border: 0; 
 
} 
 

 

 
/* Custom CSS 
 
* --------------------------------------- */ 
 
body{ 
 
\t font-family: arial,helvetica; 
 
\t color: #333; 
 
\t color: rgba(0,0,0,0.5); 
 
} 
 
.wrap{ 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t width: 960px; 
 
\t position: relative; 
 
} 
 
h1{ 
 
\t font-size: 6em; \t 
 
} 
 
p{ 
 
\t font-size: 2em; 
 
} 
 
.intro p{ 
 
\t width: 50%; 
 
\t margin: 0 auto; 
 
\t font-size: 1.5em; 
 
} 
 
.section{ 
 
\t text-align:center; 
 
} 
 
#menu li { 
 
\t display:inline-block; 
 
\t margin: 10px; 
 
\t color: #000; 
 
\t background:#fff; 
 
\t background: rgba(255,255,255, 0.5); 
 
\t -webkit-border-radius: 10px; 
 
      border-radius: 10px; 
 
} 
 
#menu li.active{ 
 
\t background:#666; 
 
\t background: rgba(0,0,0, 0.5); 
 
\t color: #fff; 
 
} 
 
#menu li a{ 
 
\t text-decoration:none; 
 
\t color: #000; 
 
} 
 
#menu li.active a:hover{ 
 
\t color: #000; 
 
} 
 
#menu li:hover{ 
 
\t background: rgba(255,255,255, 0.8); 
 
} 
 
#menu li a, 
 
#menu li.active a{ 
 
\t padding: 9px 18px; 
 
\t display:block; 
 
} 
 
#menu li.active a{ 
 
\t color: #fff; 
 
} 
 
#menu{ 
 
\t position:fixed; 
 
\t top:0; 
 
\t left:0; 
 
\t height: 40px; 
 
\t z-index: 70; 
 
\t width: 100%; 
 
\t padding: 0; 
 
\t margin:0; 
 
} 
 
.twitter-share-button{ 
 
\t position: fixed; 
 
\t z-index: 99; 
 
\t right: 149px; 
 
\t top: 9px; 
 
} 
 
#download{ 
 
\t margin: 10px 0 0 0; 
 
\t padding: 15px 10px; 
 
\t color: #fff; 
 
\t text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 
 
\t background-color: #49afcd; 
 
\t background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); 
 
\t background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); 
 
\t background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4)); 
 
\t background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); 
 
\t background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); 
 
\t background-image: linear-gradient(top, #5bc0de, #2f96b4); 
 
\t background-repeat: repeat-x; 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0); 
 
\t border-color: #2f96b4 #2f96b4 #1f6377; 
 
\t border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 
 
\t 
 
\t -webkit-border-radius: 6px; 
 
\t -moz-border-radius: 6px; 
 
\t border-radius: 6px; 
 
\t vertical-align: middle; 
 
\t cursor: pointer; 
 
\t display: inline-block; 
 
\t -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 
 
\t -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 
 
\t box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 
 
} 
 
#download a{ 
 
\t text-decoration:none; 
 
\t color:#fff; 
 
} 
 
#download:hover{ 
 
\t text-shadow: 0 -1px 0 rgba(0,0,0,.25); 
 
\t background-color: #2F96B4; 
 
\t background-position: 0 -15px; 
 
\t -webkit-transition: background-position .1s linear; 
 
\t -moz-transition: background-position .1s linear; 
 
\t -ms-transition: background-position .1s linear; 
 
\t -o-transition: background-position .1s linear; 
 
\t transition: background-position .1s linear; 
 
} 
 
#infoMenu{ 
 
\t height: 20px; 
 
\t color: #f2f2f2; 
 
\t position:fixed; 
 
\t z-index:70; 
 
\t bottom:0; 
 
\t width:100%; 
 
\t text-align:right; 
 
\t font-size:0.9em; 
 
\t padding:8px 0 8px 0; 
 
} 
 
#infoMenu ul{ 
 
\t padding: 0 40px; 
 
} 
 
#infoMenu li a{ 
 
\t display: block; 
 
\t margin: 0 22px 0 0; \t 
 
\t color: #333; 
 
} 
 
#infoMenu li a:hover{ 
 
\t text-decoration:underline; 
 
} 
 
#infoMenu li{ 
 
\t display:inline-block; 
 
\t position:relative; 
 
} 
 
#examplesList{ 
 
\t display:none; 
 
\t background: #282828; 
 
\t -webkit-border-radius: 6px; 
 
\t -moz-border-radius: 6px; 
 
\t border-radius: 6px; 
 
\t padding: 20px; 
 
\t float: left; 
 
\t position: absolute; 
 
\t bottom: 29px; 
 
\t right: 0; 
 
\t width:638px; 
 
\t text-align:left; 
 
} 
 
#examplesList ul{ 
 
\t padding:0; 
 
} 
 
#examplesList ul li{ 
 
\t display:block; 
 
\t margin: 5px 0; 
 
} 
 
#examplesList ul li a{ 
 
\t color: #BDBDBD; 
 
\t margin:0; 
 
} 
 
#examplesList ul li a:hover{ 
 
\t color: #f2f2f2; 
 
} 
 
#examplesList .column{ 
 
\t float: left; 
 
\t margin: 0 20px 0 0; 
 
} 
 
#examplesList h3{ 
 
\t color: #f2f2f2; 
 
\t font-size: 1.2em; 
 
\t margin: 0 0 15px 0; 
 
\t border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
 
\t -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); 
 
\t -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1); 
 
\t box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); 
 
\t padding: 0 0 5px 0; 
 
} 
 

 

 

 
/* Demos Menu 
 
* --------------------------------------- */ 
 
#demosMenu{ 
 
\t position:fixed; 
 
\t bottom: 10px; 
 
\t right:10px; 
 
\t z-index: 999; 
 
}

<link href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script> 
 

 
<ul id="menu"> 
 
    <li data-menuanchor="theList1"><a href="#theList1">First slide</a></li> 
 
    <li data-menuanchor="theList2"><a href="#theList2">Second slide</a></li> 
 
    <li data-menuanchor="theList3"><a href="#theList3">Third slide</a></li> 
 
    <li data-menuanchor="theList4"><a href="#theList4">Fourth slide</a></li> 
 
</ul> 
 

 
<div id="fullpage"> 
 
    <div class="section" id="section0">One</div> 
 
    <div class="section" id="section1"> 
 
    <div class="slide">Two 1</div> 
 
    <div class="slide">Two 2</div> 
 
    </div> 
 
    <div class="section" id="section2">Three</div> 
 
    <div class="section" id="section3">Four</div> 
 
</div>