jquery - タブの戻る/進むボタン - JQuery

Question

さて、クリックするとメインコンテンツエリアのコンテンツが変更される一連のタブがあります。それがこのコードです：

var $items = $('.itembox');
$items.click(function() {
    $items.removeClass('current');
    $(this).addClass('current');

    var index = $items.index($(this));
    $('.currentbox').hide().eq(index).show();


}).eq(0).click();

ただし、タブ間を変更するための戻る/*進む*ボタンもありますが、これらのボタンとタブを実装する方法がわかりません。

どんな助けでも大歓迎です！

Answer 1

現在のデータを保存する別の方法を次に示します (おまけに、最初のデータで「戻る」をクリックすると、最後のデータに移動します)。いつでもボタンからデータを照会できます:)

 var $items = $('.itembox');
 $items.click(function () {
     $items.removeClass('current');
     $(this).addClass('current');
     var index = $items.index($(this));
     $('#back').data("currentIndex", index - 1);
     $('#forw').data("currentIndex", index + 1);
     $('.currentBox').hide().eq($(this).index()).show();
 }).eq(0).click();
 $('#back, #forw').click(function () {
     $items.eq($(this).data("currentIndex")).click();
 });

作業サンプル: http://jsfiddle.net/gXpa3/

Answer 2

これは、開始するための概念実証です。最後のタブで [次へ] を押すと、最初のタブに移動します。

http://jsfiddle.net/AraYd/1/

重要なコードの一部:

   $('#next').click(function(){
     if(index+1 <= $items.length-1) {
        $items[index+1].click(); 
     } else {
       $items[0].click();   
     }
});

   $('#prev').click(function(){
     if(index-1 >= 0) {
   $items[index-1].click(); 
     } else {
     $items[$items.length-1].click();   
     }
});