how to navigate through list of links

[Bonaca]

I have:- unordered list of five links - to five different url's- next and previous buttons. I want, by clicking on next button - load page from next url in the listalso - previous button click - load url from previous list item. next button - If end of list is reached - first url should be loaded and vice versa.My pages are php. Thanks in advance.

[justsomeguy]

Do you have any code so far? Is there an iframe or something where you want the pages to load inside?

[eTianbun]

EXAMPLE:

<!--Page one: the [next] button in page 1, should be linked to page 2--><a href='page2.php'>NEXT</a><!--page two: the [next] button in page 2, should be linked to page 3, while [previous] button will link to page 1--><a href='page1.php'>PREVIOUS</a><a href='page3.php'>NEXT</a>

...and so ON!UPDATE:Thats how you do it with just html, but for JS, you need something like iframe.

Edited April 30, 2012 by eTianbun

[Bonaca]

<ul class="navigation"> <li><a href="kitchen.php">Kitchen</a></li> <li><a href="bedbath.php">Bed & Bath</a></li> <li><a href="dining.php">Fine Dining</a></li> <li><a href="lighting.php">Lighting</a></li> <li><a href="storage.php">Storage</a><li></ul> <a href=""><img src="previous.png"/></a><a href="><img src="next.png"/></a> I have no frame, but - the part of pages on which buttons exists is allways the same. I include that part by php include(). It's not a solution - clasical page linkinkg. So, on each page i have these two buttons - included from separate file. They should recognize which page is CuurentPage, and then load the next or previous page from the list.What is the way, pls?

Edited April 30, 2012 by Bonaca

[justsomeguy]

If you give that ul an ID then you can use document.getElementById to get a reference to the ul and start looping through its children. For each child node you'll need to get the "a" element inside the li, and get the href attribute of that link. You'll need to compare the link to the current page. In order to get the current page, you can get the full URL from window.location.href and split it up to get just the filename without the rest of the path. When you find the href with the current page then you'll need to check if there is another li child after that, and get the href for that to redirect to. If there's not another child then you need to go back to the first child under the ul. In order to navigate through the nodes like that there are several properties you can use. Each node will have properties for parentNode, firstChild, nextSibling, etc. If you're on the last node and need to get back to the first, you can use node.parentNode.firstChild. There's a description about the structure here: http://www.w3schools.com/htmldom/dom_nodetree.asp