Bootstrap选项卡禁用和使用jQuery

我查看了下面的示例，并尝试添加其他function。 我想最初禁用其他两个表，当我从第一个选项卡提交表单然后启用第二个选项卡。 我尝试过使用jQuery UO和jQuery。 但是无法使用Bootstrap和jQuery。

jsFiddle演示

这是我到目前为止所尝试的。

$(document).ready(function() { $('#profile').attr('class', 'disabled'); $('#message').attr('class', 'disabled'); $('#profile').removeAttr('data-toggle'); $('#messages').removeAttr('data-toggle'); }); 

Answer 1

要禁用其他两个选项卡，稍后在事件上启用它们，您可以执行以下操作，

http://jsfiddle.net/5zjXk/1/

JS

 $(document).ready(function() { /*disable non active tabs*/ $('.nav li').not('.active').addClass('disabled'); /*to actually disable clicking the bootstrap tab, as noticed in comments by user3067524*/ $('.nav li').not('.active').find('a').removeAttr("data-toggle"); $('button').click(function(){ /*enable next tab*/ $('.nav li.active').next('li').removeClass('disabled'); $('.nav li.active').next('li').find('a').attr("data-toggle","tab") }); }); 

HTML

 
 
Home
 
Profile
 
Messages
 
 
 
 
 
home
 
home
 
home
 
home
 
 submit 
 
 
 
profile
 
profile
 
profile
 
profile
 
profile
 
 submit 
 
 Tetsing 
  

Answer 2

 $(document).delegate('li.disabled a').on('click', function(e) { e.preventDefault(); return false; }); 

即使你动态添加’禁用’类它仍然可以工作。 干杯。