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

Posted 2023-05-08

【中文标题】动态更改活动选项卡索引 jQuery UI 选项卡

【英文标题】：Dynamically change active tab index jQuery UI tabs

【发布时间】：2016-09-29 20:04:51

【问题描述】：

我正在尝试创建一组两个按钮来更改 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 );
);

【问题讨论】：

Set active tab by clicking a link thats outside of the tabs?的可能重复

那个不是动态的。它不会获取当前选项卡并对其进行添加或减去，而是根据预先确定的 ID 设置它。

【参考方案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>