gpt4 book ai didi

jquery - Bootstrap 选项卡禁用并使用 jQuery

转载 作者:行者123 更新时间:2023-12-03 22:44:29 26 4
gpt4 key购买 nike

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

jsFiddle Demo

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

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

最佳答案

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

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

<ul class="nav nav-pills">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>

<div id='content' class="tab-content">
<div class="tab-pane active" id="home">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
<button>submit</button>
</div>
<div class="tab-pane" id="profile">
<ul>
<li>profile</li>
<li>profile</li>
<li>profile</li>
<li>profile</li>
<li>profile</li>
</ul>
<button>submit</button>
</div>
<div class="tab-pane" id="messages">
Tetsing
</div>
</div>

关于jquery - Bootstrap 选项卡禁用并使用 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20668880/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com