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

嗯，要获得下一个，你可以使用... 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');
    }
});

当然以前会是同样的事情，但使用prev方法而不是下一个，并且，再次根据TJ，回到最后<li>，只需使用{{1} }。

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

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

2 个答案: