如何禁用JQuery选项卡上的点击事件？ [英] How to disable click event on JQuery tabs?

问题描述

我有这些简单的标签：

 < div class =ftabs> 
 
 
< li id ='an'>< a href =＃anagdata-toggle =tab>< h3> Dati Anagrafici< / h3>< / a><李> 
< li id ='ind'>< a href =＃indirizzidata-toggle =tab>< h3> Indirizzi< / h3>< / a>< / li> ; 
< li id ='ref'>< a href =＃referentialdata-toggle =tab>< h3> Repect< / h3>< / a>< / li> ; 
< li id ='ban'>< a href =＃bluedata-toggle =tab>< h3> Banche< / h3>< / a>< / li> ; 
< / ul> 
  

我可以用jQuery打开我想要的选项卡，例如：

  $（＃ref a [href ='＃referenti']）。tab（'show'）; 
  

但我想禁用前2个标签。我尝试过这种方式，但它不起作用：

  $（'＃tabs'）。tabs（'选项'，'禁用'，[0，1]）; 
  

为什么？我怎样才能做到这一点？

解决方案

您无法禁用活动选项卡，因此需要将第三个选项卡设置为活动状态，然后禁用前两个

来自文档：

 选定的选项卡不能被禁用。 
  

所以

  jQuery（函数（$）{
 $（＃tabs）。tabs（{
 active：2，
 disabled：[0，1] 
} ）; 
}）; 
  

演示：小提琴

稍后以编程方式禁用标签

 < code $（＃tabs）。tabs（option，active，2）
 $（＃tabs）。tabs（option，disabled，[0， 1]）; 
  

演示：小提琴

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?

解决方案

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

这篇关于如何禁用JQuery选项卡上的点击事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！