单击按钮时转到html页面中的下一个位置-jQuery

Question

In my application I am using Jquery / Javascript I want to implement one functionality.

I have few divs like this,

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>

I know that to go to specific position on that page, I can use,

<a href="#Div4">go to div 4</a>

Now, I have two buttons already that are going to the previous div & going to next div.

Ie,

• Previous Button -> clicking that it will go to previous div
• Next Button -> clicking that will go to next div

How can I do this using this two buttons?

Also, I only want to show the div where the button points. Ie, if clicking next button points to Div3 then only Div3 should be shown & other divs should be hidden.

One way of doing this previous & next functionality is that when I introduce one variable which will be incremented or decremented when next or previous button clicked & depending on count of that variable I will decide which Div to point. Ie, if variable value is 5 then I will point to Div5.

Any other way any one know to do this?

Answer 1

You probably want to use the location.hash property and navigate around that using cached numbers, so assuming you have two buttons: "next" and "prev":

var marker = 0;

$('#next').click(function(){
  marker++;

  location.hash = "div" + marker;
});

$('#prev').click(function(){
  marker--;
  location.hash = "div" + marker;
});

Obviously this needs expanded on, but you have the basic premise.

Answer 2

Jquery has next and prev selector to do this

    var currentDiv=$("#div1");

    $("#btnNext").click(function()
    {currentDiv=$(currentDiv);$(currentDiv).next().show();});

    $("#btnPrev").click(function()currentDiv=$(currentDiv);   
    {$(currentDiv).prev().show();});

Note currentDiv should be a global variable.