Question

我是这个论坛的新手，所以首先让我大声问好，并感谢您提供这么棒的网站！

我是JQuery的新手，但我喜欢它，我有一些JQuery选项卡在后端执行通常的List / Edit / Create内容。

我设法在查看列表选项卡时将编辑选项卡设置为deisabled（因为您需要选择要编辑的列表项），并且在单击列表项编辑图标时启用它。

我的问题是，如果我再单击第三个选项卡，如何禁用第二个选项卡？

这是我的标准标签代码......

$(function() 
        {
        $("#tabs").tabs({disabled: [2]});

        $("#tabs").tabs();      
        }
    );

HTML：

<div class="demo">

<div id="tabs">
    <ul>
        <li><wont let me post 3 links>Jobs</a></li>
        <li><a href="#tabs-2">Create Job</a></li>
        <li><a href="#tabs-3">Edit Job</a></li>
    </ul>
    <div id="tabs-1" style="background-color: #fff">

        Include...

    </div>
    <div id="tabs-2" style="background-color: #fff">

        Include...

    </div>
    <div id="tabs-3" style="background-color: #fff">

        Include...

    </div>
</div>

由于

Answer 1

首先你的HTML不正确所以插件没有初始化。第一个标签按钮链接不正确：

<li><wont let me post 3 links>Jobs</a></li>

应该是

<li><a href="#tabs-1">Jobs</a></li>

然后你要初始化两次插件，只做一次。
在show事件处理程序中，根据显示的实际选项卡启用/禁用选项卡：

$(function() 
{
    $("#tabs").tabs({
        //disabled: [2],
        show: function(event, ui) {
            if (ui.index === 0) {
                $('#tabs').tabs('enable', 1);
                $('#tabs').tabs('enable', 2);
            } else {
                $('#tabs').tabs('disable', ui.index === 1 ? 2 : ui.index === 2 ? 1 : -1);
            }
        }
    });

    /*$("#tabs").tabs();      
    }*/
);

以下是jsfiddle

上的实时工作示例

单击选项卡2时，JQuery禁用选项卡3？

1 个答案: