0

ul メニュー リストに添付された jquery を使用して、Web サイトのアンカーにスクロールします。ウェブサイトは横型です。現時点では、#pane01、#pane02、#pane03 などのフック a href を介してすべて正常に動作しています (各 div id にはこれが与えられます)。

コードは次のとおりです。

$('ul.submenu a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left - 200
}, 1000);
event.preventDefault();
});

私たちがやりたいことは、フローティングの前/次のリンクを使用して、これらのパネル間を前後にスクロールすることです。したがって、それらが #pane03 にある場合、前をクリックすると #pane02 に移動し、次をクリックすると #pane04 に移動します。

jqueryを介してそれを行うにはどうすればよいですか?

4

1 に答える 1

0

スクロールはすでに正常に機能しているためです。<a>クリックしたら、アクティブなクラスを設定するだけです。これは、前のリンクと次のリンクのセレクターとして機能します。

これは同様のマークアップだと思います：

<div>
    <ul class="submenu">
        <li><a href="#pane01" class="active">Panel 1</a></li>
        <li><a href="#pane01">Panel 1</a></li>
        <li><a href="#pane01">Panel 1</a></li>
    </ul>
</div>

<a id="prev">Previous</a>
<a id="next">Next</a>

jQuery:

$('ul.submenu a').bind('click',function(event){
    var $anchor = $(this);
    //setting active on <a>
    $anchor.addClass('active').parent('li').siblings().children('a').removeClass('active');

    $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left - 200
    }, 1000);
    event.preventDefault();
});

$('#prev').click(function(){
    $('ul.submenu a.active').parent('li').prev().children('a').trigger('click');
});

$('#next').click(function(){
    $('ul.submenu a.active').parent('li').next().children('a').trigger('click');
});

デモフィドル

于 2013-11-05T14:07:42.960 に答える