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页的选项卡将被禁用，第3页的选项卡仍然禁用。

我已经尝试了下面的代码，但它无法正常工作，因为它会禁用整个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>

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

2 个答案: