Home/ Questions/Q 6702755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T07:05:27+00:00

I have 5 divs with ids; #one, #two, #three, #four and #five. I have

  • 0

I have 5 divs with ids; #one, #two, #three, #four and #five. I have a navigation menu linked to each div like this;

  <ul>
     <li><a href="#one">ONE</a></li>
     <li><a href="#two">TWO</a></li>
     <li><a href="#three">THREE</a></li>
     <li><a href="#four">FOUR</a></li>
     <li><a href="#five">FIVE</a></li>
  </ul>

where each div represents a single page on my website, the the ul works perfectly but is there a way can have a single button like a “next” button that will go to page 2 when clicked and when clicked again will go to page 3 and so on… preferably using some sort of jquery or even javascript

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I will respond based on the assumption that this is a purely theoretical exercise and given only the information you have provided. Please note that there are better ways of doing what you ask, as alluded to in the first comment.

    However, assuming that you have, as you say, got an identical navigation menu on each page, and that, as you say, each div is on a separate web page, I suggest that you could continue your existing methodology and place a “Previous” and “Next” button on each page, and hook it up manually to the correct page.

    For example, on page with #one, you would have buttons that might look like this:

    <a href="#">Previous</a><!-- does nothing.. because you're on the first page -->
<a href="#two">Next</a><!-- goes to page 2 -->

    On subsequent pages, you would hard-code the links to the other pages, and on the final page you would blank out the Next button in a similar way to the way the Previous button was blanked out above.

    Having said that. You could put all Divs in the same web page, and show/hide them using JavaScript and CSS. For example:

    <div id="one" style="display:block;">Div 1</div>
<div id="two" style="display:none;">Div 2</div>
<div id="three" style="display:none;">Div 3</div>
<script type="text/javascript">
function focusOnAParticularDiv(divId)
{
    switch(divId)
    {
        case 'one':
            document.getElementById('two').style.display = 'none';
            document.getElementById('three').style.display = 'none';
            document.getElementById('one').style.display = 'block';
            break;
        case 'two':
            // etc...
            break;
        case 'three':
            // etc...
            break;
    }
}
</script>

    You could then call that JS function on the onClick event of the next/previous buttons.

    <input type="button" text="Next" onclick="focusOnAParticularDiv('two');" />

    Or something like that…

    You could choose to use JQuery’s shortcuts if you wish.

    Alternatively, you could use an ASP.NET Wizard control 🙂

    As mentioned in some other comments, you can also create the div the user is after at the server side, which would avoid sending ALL the divs to the client on the first request (this would speed up the user’s first request). This would mean you do not need any JavaScript, but would also mean that each time the user clicked a button the page would be destroyed and recreated on the server and sent back to the client (a full round-trip), which would have an impact on the number of hits your server gets.

    It really depends what you’re after and what your criteria are; hence why I have tried to cover several bases for you.

    • 0