2

次のボタンをクリックすると、次の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>
4

2 に答える 2

4

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

もちろん、前も同じですが、次の代わりに前のメソッドを使用します。また、TJ ごとに、最後の にラップするには<li>、単純に を使用します$current.siblings().last()。

于 2013-06-02T07:15:34.737 に答える
3

これはどう？

$('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');
});
于 2013-06-02T07:15:37.500 に答える