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

Question

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

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

好吧，要获得下一个，您可以使用... 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，使用最后一个<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');
});