如何在 ASP.NET 的运行时启用和禁用 jQuery 选项卡

Question

我想根据 AJAX 内容禁用和启用 jQueryUI 选项卡。

<script>
        $(function () {
            $("#tabs").tabs({
                disabled: [1, 2,3],
                collapsible: true,
                fx: [{
                    opacity: 'toggle',
                    duration: 'slow',
                    height: 'toggle'
                }, 
                     {
                         opacity: 'toggle',
                         duration: 'slow',
                         height: 'toggle'
                     }],
                beforeLoad: function (event, ui) {
                    ui.jqXHR.error(function () {
                        ui.panel.html(
                            "Couldn't load this tab. We'll try to fix this as soon as possible. ";
                    });
                }
            });
        });


    </script>

还有 HTML 代码：

<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="Default2.aspx" style="width: 100%;" height="900"></iframe>

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

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

            <iframe id="iframe4" src="Default3.aspx" style="width: 100%;"></iframe>
        </div>

例如，当用户选择popular-tab 时，它会加载 Default3.aspx 页面。在每一页我都有Next 按钮。我希望当用户单击 Next 按钮时，用户可以使用此选项卡和下一个选项卡，但不能使用前一个选项卡。例如，当recent-tab 中的用户单击Next 按钮时，recent-tab 处于启用状态，但 popular-tab 处于禁用状态。

编辑 01：
我有 4 页和示例 page1.aspx,page2.aspx,page3.aspx,page4.aspx，默认情况下我有标签，当用户选择标签 recent-tab 为用户和 page2.aspx 和 page3.aspx 加载 page1.aspx 和page4.aspx 处于非活动状态，在 page1 我有按钮，当用户单击此按钮时，我想转到 popular-tab 并加载 page3.aspx 和非活动的最近选项卡和活动的流行选项卡。等等，当在 page2 中为按钮下一步编写此代码时不起作用。谢谢你的帮助

谢谢。

Answer 1

在“下一步”按钮的点击事件中，您可以使用 onclick 功能来禁用之前的选项卡。

例如，如果您单击“最近标签”中的下一个按钮，则下一个按钮将如下所示：

<button onclick="$('.next-button').tabs({ disabled: [ 1, 2, 3 ] })">Next</button>

以下是关于禁用标签的官方文档。

http://api.jqueryui.com/tabs/#option-disabled