在 BootStrap 选项卡中添加动态选项卡

Posted 2023-02-22

【中文标题】在 BootStrap 选项卡中添加动态选项卡

【英文标题】：Adding Dynamic Tab in BootStrap Tabs

【发布时间】：2012-04-16 07:41:37

【问题描述】：

我在我的页面上使用 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');

任何人都可以告诉我我缺少什么吗？

【问题讨论】：

有同样的问题。当我将 附加到选项卡列表时，它会添加元素但会删除 id 字段和 innerhtml。如果我找到解决方案，我会返回

【参考方案1】：

现在我正在使用这个有效的代码

$('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');

【参考方案2】：

在我的项目中，我使用此代码添加标签

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

【讨论】：

也许你可以解释一下你做了什么以及为什么会这样。

【参考方案3】：

如果它对任何人有帮助，我使用的变体似乎更有意义。

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');