如何禁用 JQuery 选项卡上的点击事件？

Question

我有这些简单的标签：

<div class="ftabs">                    

<ul id="tabs" class="tabs nav nav-tabs nav-justified" data-tabs="tabs">
    <li  id='an'><a href="#anag" data-toggle="tab"><h3>Dati Anagrafici</h3></a></li>
    <li id='ind'><a href="#indirizzi"  data-toggle="tab"><h3>Indirizzi</h3></a></li>
    <li id='ref'><a href="#referenti" data-toggle="tab"><h3>Referenti</h3></a></li>
    <li id='ban'><a href="#blue" data-toggle="tab"><h3>Banche</h3></a></li>
</ul>

我可以用jQuery打开我想要的标签，例如：

$("#ref a[href='#referenti']").tab('show');

但我想禁用前 2 个选项卡。这个方法我试过了，还是不行：

$('#tabs').tabs('option', 'disabled', [0, 1]);

为什么？我该怎么做？

Answer 1

您不能禁用活动标签，因此需要将第三个标签设置为活动然后禁用前两个

From Docs:

The selected tab cannot be disabled.

所以

jQuery(function ($) {
    $("#tabs").tabs({
        active: 2,
        disabled: [0, 1]
    });
});

演示：Fiddle

稍后以编程方式禁用选项卡

$("#tabs").tabs("option", "active", 2)
$("#tabs").tabs("option", "disabled", [0, 1]);

演示：Fiddle

Answer 2

我会使用 jquery index() (http://api.jquery.com/index/) 函数。有了它，您可以找到作为参数传递的元素的索引，如下所示：

//selector could be wrong but you have the use logic
$(".tabs > li").click(function() {
    if ($(".tabs > li").index($(this)) > 1) {
        $(this).tab('show');
    }
});