활성 탭 인덱스를 동적으로 변경하십시오. jQuery UI 탭

Question

jQuery Ui의 활성 탭을 변경하는 두 개의 단추 세트를 작성하려고합니다. 내가하고 싶은 일은 활성 탭 인덱스를 얻은 다음 버튼을 눌렀을 때 다음 탭 또는 이전 탭으로 이동하는 것입니다.

예를 들어, 활성 탭이 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> 

의