Kod
function links() {
var links = document.getElementsByTagName('a');
for(var i=0; i<links.length; i++) {
if(links[i].innerHTML == 'next' || links[i].innerHTML == 'previous') {
links[i].addEventListener('click', showPage, false);
}
}
}
function showPage() {
var pages = document.getElementsByTagName('div');
for(var i=0; i<pages.length; i++) {
if(pages[i].className == 'page') {
if(this.innerHTML == 'next') {
if(pages[i].style.display == 'block') {
pages[i].style.dislay = 'none';
pages[i+1].style.display = 'block';
break;
}
}
else if(this.innerHTML == 'previous') {
if(pages[i].style.display == 'block') {
pages[i].style.dislay = 'none';
pages[i-1].style.display = 'block';
break;
}
}
}
}
}
var links = document.getElementsByTagName('a');
for(var i=0; i<links.length; i++) {
if(links[i].innerHTML == 'next' || links[i].innerHTML == 'previous') {
links[i].addEventListener('click', showPage, false);
}
}
}
function showPage() {
var pages = document.getElementsByTagName('div');
for(var i=0; i<pages.length; i++) {
if(pages[i].className == 'page') {
if(this.innerHTML == 'next') {
if(pages[i].style.display == 'block') {
pages[i].style.dislay = 'none';
pages[i+1].style.display = 'block';
break;
}
}
else if(this.innerHTML == 'previous') {
if(pages[i].style.display == 'block') {
pages[i].style.dislay = 'none';
pages[i-1].style.display = 'block';
break;
}
}
}
}
}
każdy DIV ma swoje id i klasę "page".
CSS: #_01 {display:block;} #_02 {display:none;} #_03 {display:none;}
onload=links();
niestety działać poprawnie nie chce!
już sobie poradziłem:
problem był w warunku if(pages[i].style.display == 'block'), który nie odczytuje CSS display:block. Dołożyłem if(pages[i].style.display == '') i działa. A swoją drogą to nie wiem dlaczego akurat warunek JS display "pusty" czyta CSSa display:block;
