jquery - 如何在jquery ui选项卡中仅启用一个选项卡

Question

我在 asp.net 中创建选项卡使用 jqueryui 选项卡并编写此代码以创建选项卡

<div id="tabs">
            <ul>
                <li class="context-tab"><a id="recent-tab" href="#iframe1">Recent</a></li>
                <li class="context-tab"><a id="popular-tab" href="#iframe2">Popular</a></li>
                <li class="context-tab"><a id="random-tab" href="#iframe3">Random</a></li>
                <li class="context-tab"><a id="question-tab" href="#iframe4">By Question</a></li>

            </ul>
            <iframe id="iframe1" src="Default3.aspx" style="width: 100%;" height="900"></iframe>

            <iframe id="iframe2" src="Default4.aspx" style="width: 100%;"></iframe>

            <iframe id="iframe3" src="Default5.aspx" style="width: 100%;"></iframe>

            <iframe id="iframe4" src="Default6.aspx" style="width: 100%;"></iframe>
        <a id="goNext" href="#" style="display: none;">Next</a>
        </div>

     <script>
         $(function () {
             var $tabs = $("#tabs");
             $tabs.tabs();
             $tabs.tabs("option", 'disabled', [1, 2, 3]);
             function getSelectedTabIndex() {
                 return $tabs.tabs('option', 'selected');
             }


             $("#goNext").click(function () {
                 var b = getSelectedTabIndex() + 1;
                 $tabs.tabs('enable', b);
                 $tabs.tabs('option', 'active', b);
                 $tabs.tabs('option', 'selected', b);
             });
         });
    </script>

我想要任何时候只有一个选项卡可以处于活动状态，并且所有选项卡都处于非活动状态。请帮我。谢谢大家。

演示

Answer 1

尝试这个：

$("#goNext").click(function () {
    var b = getSelectedTabIndex() + 1;

    // Disable the rest of the tabs are not active
    var c = $tabs.find("ul li").size();
    for (var i = 0; i < c; i++) {
        $tabs.tabs("disable", i);
    }

    $tabs.tabs('enable', b);
    $tabs.tabs('option', 'active', b);
    $tabs.tabs('option', 'selected', b);
});