如何浏览通过无序列表浏览

Question

我知道你得到了很多，但我想通过添加方向箭头（next，prev）来改进这个水平滚动网站demo我想知道如何进行这些导航例如，当点击时进入下一页。该UL看起来像这样

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

我知道这是可能通过JavaScript和/或jQuery的，所以如果你知道豪请帮助 另外，如果可能，我如何从最后一页（#five）获得第一和反之亦然

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

})