javascript - 如何使用 jquery 获取下一页/上一页

Question

单击下一步按钮时将重定向到下一个 li

<div id="mainmenu">
    <ul id="menu">
        <li class="active"><a href="Home">Home</a></li>
        <li ><a href="news">News</a></li>
        <li ><a href="Sports">Sports</a></li>
  </ul>
<a href="#" class="next">next</a>
<a href="#" class="prev">prev</a>

Answer 1

我假设您想<li>根据当前活动类的位置循环浏览那些 s？

好吧，要获得下一个，您可以使用 ... next方法:)

$('.next').click(function(){
    var $current = $('li.active');
    var $next = $current.next();
    if ($next.length){ 
       window.location = $next.find('a').attr('href'); //I assume???
    } else {
       //let's wrap around to the first li in the list, per TJ's comment
       var $wrapAroundTarget = $current.siblings().first();
       window.location = $wrapAroundTarget.find('a').attr('href');
    }
});

当然 previous 是一样的，但是使用prev方法而不是 next 方法，并且，再次根据 TJ，绕到 last <li>，只需使用$current.siblings().last().

Answer 2

这个怎么样？

$('a.next').click(function() {
    $('#mainmenu li.active').next().each(function () {
        window.location = $(this).find('a').attr('href');
    });
});

$('a.prev').click(function() {
    $('#mainmenu li.active').prev().each(function () {
        window.location = $(this).find('a').attr('href');
    });
});

如果您可以保证您不会尝试从第一个链接上一个链接或从最后一个链接下一个链接（通过隐藏链接等），则可以显着简化代码：

$('a.next').click(function() {
    window.location = $('#mainmenu li.active').next().find('a').attr('href');
});

$('a.prev').click(function() {
    window.location = $('#mainmenu li.active').prev().find('a').attr('href');
});