Question

我们使用附加到ul菜单列表的jquery滚动到网站中的锚点。该网站是横向的。目前，它通过＃pane01，＃pane02，＃pane03等的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做到这一点？

Answer 1

由于您的滚动功能已经适合您。您只需在<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');
});

Demo fiddle

使用上一个/下一个标记的jquery锚点偏移量

1 个答案: