在BootStrap选项卡中添加动态选项卡
Adding Dynamic Tab in BootStrap Tabs
我在页面上使用Twiter Bootstrap选项卡。我想在视图中动态添加选项卡。目前我正在使用这个代码,它不工作
$('#tab').append('<li><a href="#tabname" data-toggle="tab">Tab Name</a></li>');
$('#myTabContent').append('<div class="tab-pane fade in active" id="tabname"><p>tab content</p></div>');
$('#tab a:last').tab('show');
有人能告诉我我缺了什么吗?
现在我使用的是运行的代码
$('div.active').removeClass('active').removeClass('in');
$('li.active').removeClass('active');
$('#myTabContent').append('<div class="tab-pane in active" id="new_tab_id"><p> Loading content ...</p></div>');
$('#tab').append('<li><a href="#new_tab_id" data-toggle="tab">Tab Name</a></li>');
$('#tab a:last').tab('show');
在我的项目中,我使用此代码添加选项卡
app = function(){
return {
tabAdd: function(sel, id, label, content, show){
var tabs = $(sel);
$('div.active', tabs).removeClass('in').add($('li.active', tabs)).removeClass('active');
$('.tab-content', tabs).append('<div class="tab-pane in active" id="'+id+'">'+content+'</div>');
$('.nav-tabs', tabs).append('<li><a href="#'+id+'" data-toggle="tab">'+label+'</a></li>');
if(show==true) $('.nav-tabs a:last').tab('show');
}
}}();
//Example
app.tabAdd('#tabs', 'idNew', 'Label', 'Сontent', true);
如果它能帮助任何人,我使用的变体似乎更有意义。
this.addTab = function(id, label, content ){
var nav = $( tab_nav_id ); // ID of your nav-tabs element
var tabs = $( tab_list_id ); // ID of your tab-content element
var new_tab = $('<div>').addClass( 'tab-pane in').attr('id', id).append( content );
var new_li = $('<li>').append( $('<a>').attr('href', "#" + id).attr('data-toggle', 'tab').append( label ) );
tabs.append( new_tab );
nav.append( new_li );
return new_li;
};
返回new_li可以方便地从调用类中调用。
var tab = this.addTab( 'some_key', 'Tab Title', 'Tab Content' );
// do stuff with tab
tab.find('a').tab('show');
相关文章:
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- jQuery动态表单显示在select选项上
- 从动态创建的html选择中选择所选选项
- .aspx页面上引导程序中的动态选项卡
- 使用php动态更改选择选项
- 带有多个答案选项的Javascript动态数组窗口
- 表单选择选项动态吸引
- 如何使用提示将选项动态添加到选择菜单以获取值
- 如何从选择菜单选项动态声明全局变量
- 将选项动态添加到选择框中
- 使用jQuery将选项动态分组到opt组中
- jquery中的select选项动态字段无效
- 将表单从多个选项动态更改为平面选项
- 使用ng选项动态添加禁用的选项项
- 合成:如何根据从单选按钮中选择的选项动态更改画布新图纸
- Magento简单产品页面-使用自定义选项动态更新SKU
- 主干网-使用用户输入的选项动态应用select2
- 无法使用其选项动态创建select
- JQUERY填充"选择"选项动态地基于来自另一个选择元素的输入