动态更改活动选项卡索引jQuery UI选项卡

我试图创建一组两个按钮，将更改jQuery Ui中的活动选项卡。我想要做的是获取活动选项卡索引，然后根据按下哪个按钮转到下一个选项卡或上一个选项卡。例如，如果活动选项卡是数字3，单击“moveLeft”会将其更改为2.如果单击“moveRight”，它会将其更改为4.我知道它类似于以下内容，但不是挺：动态更改活动选项卡索引jQuery UI选项卡

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

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

来源

2016-05-31 DeanH

可能的复制（HTTP [点击选项卡之外的链接，多数民众赞成设置活动选项卡？]：//计算器.com/questions/15641134/set-active-tab-by-clicking-a-link-thats-outside-the-tabs） –

那一个不是动态的。它不会获得当前的选项卡并添加或减去它，它会根据预定的ID进行设置。 – DeanH

我知道你需要添加prev/next按钮。我需要一个有步骤的流程。我用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>

的

来源

2016-08-19 15:21:53

动态更改活动选项卡索引jQuery UI选项卡

回答

相关问题