Question

我知道你得到了很多，但我想通过添加方向箭头（下一个，上一个）来改进这个横向滚动网站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');   
        }
    }

})

如何导航浏览无序列表

2 个答案: