使用上一個/下一個標籤的jquery錨點偏移量

Question

我們使用附加到ul菜單列表的jquery滾動到網站中的錨點。該網站是水平的。目前，它是所有工作的罰款通過鉤pane01，＃pane02，＃pane03等（每個DIV ID是有這個）＃

代碼爲A HREF：

$('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