Jump to content

how to navigate through list of links


Bonaca
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 by eTianbun
Link to comment
Share on other sites

<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 by Bonaca
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...