CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vaibhav shah
vaibhav shah

Reputation: 5069

Go to next position in html page when clicking a button - jquery

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.

I.e.,

How can I do this using this two buttons?

Also, I only want to show the div where the button points. I.e., 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. I.e., if variable value is 5 then I will point to Div5.

Any other way any one know to do this?

Upvotes: 1

Views: 1486

Answers (2)

MDJ
MDJ

Reputation: 366

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.

Upvotes: 1

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

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.

Upvotes: 2

Related Questions