0

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

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();

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

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

4

2 に答える 2

0

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

 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/

于 2013-01-25T22:52:10.637 に答える
0

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

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();   
     }
});
于 2013-01-25T22:34:18.680 に答える