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

时间:2013-05-02 08:31:58

标签: jquery jquery-ui jquery-ui-tabs

我在asp.net中创建选项卡使用jqueryui选项卡并为create tab

编写此代码
<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>

我想只有一个标签可以随时激活而且所有标签都没有激活。请帮我。谢谢大家。

Demo

1 个答案:

答案 0 :(得分:2)

试试这个:

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