如何在 Jquery UI 中禁用除活动选项卡之外的其他选项卡。使用 Next 和 PRev 按钮

Question

我正在构建一个使用“下一个”和“上一个”按钮切换选项卡的示例。当您在一个选项卡中时，您无法单击另一个选项卡。 我可以使用 jquery UI js/css 构建下一个和上一个函数，因为它有很多在线教程。 但是当您跳转其他选项卡时，我无法禁用其他选项卡。 我尝试为其他选项卡添加和删除类但失败。

这是我的代码：

<div id="tabs">
<ul>
    <li>
        <a href="#tabs-1">Page 1</a>

    </li>
    <li>
        <a href="#tabs-2" class="ui-state-disabled">Page 2</a>

    </li>
    <li>
        <a href="#tabs-3" class="ui-state-disabled">Page 3</a>

    </li>
</ul>
<div id="tabs-1">
    <p>Test content 1</p>
    <a href="#" class="btn-primary btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">

    <p>Test content 2</p>
    <a href="#" class="btn-primary btnPrev" style="color:white;">Previous Tab</a>
    <a href="#" class="btn-primary btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
    <p>Test content 3</p>
    <a href="#" class="btn-primary btnPrev" style="color:white;">Previous Tab</a>
</div>
</div>

这是我的脚本

 $("#tabs").tabs();
$(".btnNext").click(function () {
    $("#tabs").tabs("option", "active", $("#tabs").tabs('option', 'active') + 1);

});
$(".btnPrev").click(function () {
    $("#tabs").tabs("option", "active", $("#tabs").tabs('option', 'active') - 1);
});

我的目标是当您从第 1 页单击下一个按钮时，您将转到第 2 页，但第 2 页的选项卡将变为未禁用（我正在使用 ui-state-disabled 禁用第一个条目的这些选项卡本页的标签页），第 1 页的 tab 将被禁用，第 3 页的 tab 也保持禁用状态。

我已经尝试了下面的代码，但它不起作用，因为它禁用了整个 div 而不是选项卡

 $("#tabs" + 1).removeClass("ui-state-disabled");
    $("#tabs").addClass("ui-state-disabled");

我有编码逻辑问题XD

需要在这里寻求答案。

Answer 1

我想你想要这样：

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul>
    <div id="tabs-1">
        <p>pag1</p>
    </div>
    <div id="tabs-2">
        <p>page2</p>
    </div>
    <div id="tabs-3">
        <p>page3</p>
    </div>
</div>

JS

$(document).ready(function() {

    $(function() {

        var $tabs = $('#tabs').tabs({
            disabled: [0, 1, 2]
        });

        $(".ui-tabs-panel").each(function(i) {

            var totalSize = $(".ui-tabs-panel").size() - 1;

            if (i != totalSize) {
                next = i + 2;
                $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
            }

            if (i != 0) {
                prev = i;
                $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
            }

        });

        $('.next-tab, .prev-tab').click(function() {
            var tabIndex = $(this).attr("rel");
            $tabs.tabs('enable', tabIndex)
                .tabs('select', tabIndex)
                .tabs("option","disabled", [0, 1, 2]);
            return false;
        });


    });

});

CSS：

/* Prev / Next */
a.mover { background-color: #FBE863; color: #957D31; padding: 6px 12px; position: absolute; font-weight: bold; text-decoration: none; }
.next-tab { border-left: 5px solid #fff; border-bottom: 5px solid #fff; top: 250px; right: 0;}
.prev-tab { border-right: 5px solid #fff; border-bottom: 5px solid #fff; top: 250px; left: 0;}

Demo

Answer 2

 <script>
   $(document).ready(function() {

    $(function() {

        var $tabs = $('#tabs').tabs({
            disabled: [0, 1, 2,3]
        });

        $(".ui-tabs-panel").each(function(i) {

            var totalSize = $(".ui-tabs-panel").size() - 1;

            if (i != totalSize) {
                next = i + 2;
                $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
            }

            if (i != 0) {
                prev = i;
                $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
            }

        });

        $('.next-tab, .prev-tab').click(function() {
            var tabIndex = $(this).attr("rel");
            $tabs.tabs('enable', tabIndex)
                .tabs('select', tabIndex)
                .tabs("option","disabled", [0, 1, 2,3]);
            return false;
        });


    });

});
    </script>