アクティブなタブのインデックスを動的に変更するjQueryのUIタブ

Question

jQuery Uiのアクティブなタブを変更する2つのボタンのセットを作成しようとしています。私がしたいのは、アクティブなタブのインデックスを取得し、次にどのタブが押されたかに基づいて、次のタブまたは前のタブに移動することです。

たとえば、アクティブなタブが3の場合、「moveLeft」をクリックすると2に変更されます。「moveRight」をクリックすると、4に変更されます。かなり：

var activeTab = $(".tabs").tabs("option", "active"); 

$('#moveLeft').click(function() { 
    $(".tabs").tabs({ activeTab: -1 }); 
}); 
$('#moveRight').click(function() { 
    $(".tabs").tabs({ activeTab: +1 }); 
}); 

Answer 1

私は、前/次のボタンを追加する必要があることを理解しています。ステップがあるプロセスにはその必要がありました。私はjqueryのUIのタブを使用し、これは私の仕事：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ui-tabs').tabs(); 
     function GetSelTabIndex() { 
      return $('#ui-tabs').tabs('option', 'active'); 
     } 
     function ShowTabs(stepN) { 
      var n = parseInt(stepN); 
      $('#ui-tabs').tabs('option', 'active', parseInt(GetSelTabIndex()) + n); 
     } 

     $('#moveLeft, #moveRight').click(function() { 
      ShowTabs(this.value); 
     }) 
    }); 
</script> 

は、HTML：の

<button id="moveLeft" value="-1">Previous tab</button> 
<button id="moveRight" value="1">Next tab</button>