How do you navigate Navigate through an unordered list

Question

I know you get these a lot but I am trying to improve on this horizontal scrolling website demo by adding direction arrows (next, prev) I would like to know how to make these navigate to the next page for example, when clicked. The UL looks 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>

I know this is possible through javascript and/or jquery so if you know ho please help additionally if its possible how would i get from the last page (#five) to first and vice versa

Answer 1

Here are few examples:

 $('li').each(function() {
        //alert($(this).text());
    });


alert($('li:eq(2)').text());   -> returns THREE
alert($('li:eq(2)').prev().text()); -> returns TWO
alert($('li:eq(2)').next().text()); -> returns FOUR

to get the href:

alert($('li:eq(2) a').attr('href')); -> returns #three

Update

$('li:eq(0)').addClass('selected');

$('#next').click(function(ev) {
    ev.preventDefault();
    var selectedLi = $('li.selected');
    if (selectedLi.index() == 4) {
        $('li:eq(0)').click();
    }
    else {
        selectedLi.next().click();
    }
    selectedLi.removeClass('selected');
});

$('#prev').click(function(ev) {
    ev.preventDefault();
    var selectedLi = $('li.selected');
    //first
    if (selectedLi.index() == 0) {
        $('li:eq(4)').click();
    } else {
        selectedLi.prev().click();
    }
    selectedLi.removeClass('selected');
});


$('li').click(function() {
    var hreff = $('a', this).attr('href');
    $(this).addClass('selected');
    alert(hreff);
});

example: navigation unsorted list

Answer 2

Example using Up and Down arrows

var lias = $('li a');
lias.first().addClass('sel');
$(document).keydown(function(e) {
    var sel = $('.sel');
    sel.removeClass('sel')
    if (e.which == 40) {
        sel.parent().next('li').find('a').addClass('sel');
        if ($('.sel').length == 0) {
         $('li a').first().addClass('sel');   
        }
    } else if (e.which == 38) {
        sel.parent().prev('li').find('a').addClass('sel');
        if ($('.sel').length == 0) {
         $('li a').last().addClass('sel');   
        }
    }

})