How to disable click event on JQuery tabs?

问题

I have these simple tabs:

<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>

I can open the tab that I want with jQuery, for example:

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

but I would like to disable the first 2 tabs. I've tried it this way, but it doesn't work:

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

Why? How can I do this?

回答1:

You cannot disable the active tab, so need to set the 3rd tab as active then disable the first two

From Docs:

The selected tab cannot be disabled.

So

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

Demo: Fiddle

To disable the tabs programatically later

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

Demo: Fiddle

回答2:

I would use the jquery index() (http://api.jquery.com/index/) function. With it you can find out the index of the element you're passing as argument doing like this :

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

来源：https://stackoverflow.com/questions/20516174/how-to-disable-click-event-on-jquery-tabs