Question

I´m pretty profane in javascript.

I need a previous and next link that will just go to the previous or next #anchor.

All the anchors are divs with the same ID

This is what I have managed to do:

<script type="text/javascript">
$(document).ready(function() {

// Go to the next link
function goToNext() {

        window.location.href = .next('#display');
    }
}

// Go to the previous link
function goToPrev() {

        window.location.href = .prev('#display');
    }
}

</script>

then

<a href="javascript:goToNext()">next</a>
        <a href="javascript:goToPrev()" >Prev</a>

thanks!

Answer 1

It seems that you’re using jQuery.

You can make your ID’s to end with a number:

<div id="display_0">zero</div>
<div id="display_1">one</div>
<div id="display_2">two</div>
<div id="display_3">three</div>
<div id="display_4">four</div>
<div id="display_5">five</div>


<a href="#" id="prev">Prev</a>
<a href="#" id="next">Next</a>

Then bind functions to your next and prev links that increment/decrement an index, and set the location.hash to the ID plus the index.

$(document).ready(function() {

       // index to reference the next/prev display
    var i = 0;
       // get the total number of display sections
       //    where the ID starts with "display_"
    var len = $('div[id^="display_"]').length;


       // for next, increment the index, or reset to 0, and concatenate 
       //    it to "display_" and set it as the hash
    $('#next').click(function() {
        i = ++i % len;
        window.location.hash = "display_" + i;
        return false;
    });


       // for prev, if the index is 0, set it to the total length, then decrement
       //    it, concatenate it to "display_" and set it as the hash
    $('#prev').click(function() {
        if (!i) i = len;
        --i;
        window.location.hash = "display_" + i;
        return false;
    });

});