动态更改活动选项卡索引 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>