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>

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

1 个答案: