jquery - 使用上一个/下一个标签的jquery锚偏移

Question

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

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

演示小提琴