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

Question

I am building a example of switching tab with Next and Previous buttons. and you cannot click the other tab when you are in a tab. I can build this next and previous function with jquery UI js/css because it has so many online tutorial for it. but i am having problem to disable other tabs when you jumping other tabs. i try to add and remove class for other tab but fail.

this is my code:

<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>

This is my Script

 $("#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);
});

my goal is when you click the next button from page 1 , then you will go to page 2 but the tab of page 2 will become not disable (i am using ui-state-disabled to disable those tab for the first entry of this page) , and the tab of page 1 will be disable, and also tab of page 3 keep disable still.

I have tried the code below but its not working because it disable the whole div but not the tab

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

i have coding logic problem XD

Need to seek answer here.

Answer 1

I think You want like this:

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;
        });


    });

});

/* 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>