どのようにナビゲートするのですか？

Question

私はこれらのことをたくさん知っていますが、この水平スクロールウェブサイトdemoを改善しようとしています。矢印の追加（次へ、前へ）これらをナビゲートする方法を知りたいです例えば、クリックされると次のページに移動します。 ULは、あなたがホ知っていればどのようにその可能性は、私が最初に最後のページ（#five）からになるだろう場合は別途 を助けてくださいので、私は、これはJavaScriptと/またはjqueryの通過可能である知っているこの

<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> 

のように見え、ここではその逆

Answer 1

いくつかの例です：

$('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 

のhrefを取得する：

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

更新

$('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'); 
     } 
    } 

})