Question

情况是这样，我可以使用以下代码动态创建一个新选项卡：

这是jquery：

   $(".nav-tabs").on("click", "a", function(e){
  e.preventDefault();
  $(this).tab('show');
})
.on("click", "span", function () {
    var anchor = $(this).siblings('a');
    $(anchor.attr('href')).remove();
    $(this).parent().remove();
    $(".nav-tabs li").children('a').first().click();
});

$('.add-address').click(function(e) {
    e.preventDefault();
    var id = $(".nav-tabs").children().length; //think about it ;)
    $(this).closest('li').before('<li><a href="#address_'+id+'" data-toggle="tab">Additional Address</a><span>x</span></li>');
    $('.tab-content').append('<div class="tab-pane" id="address_'+id+'">Test Address '+id+'</div>');
 });

这是 HTML

  <div class="nav-tabs-custom">
             <ul class="nav nav-tabs" >
                  <li <?php  echo 'class="active"'; ?>><a href="#address_01" data-toggle="tab" class="ticket-tab-button"><?php _e('Primary Address'); ?></a></li>
                  <li><a href="#address_02" data-toggle="tab" class="ticket-tab-button"><?php _e('Additional Address'); ?></a></li>
                  <li><a href="#" class="add-address">+ Add Address</a>
             </ul>

             <div class="tab-content" id="test">
                 <div  class="tab-pane active" id="address_01">Address #1</div>
                 <div  class="tab-pane" id="address_02">Address #2</div>
             </div>
         </div>

问题是，正在创建新选项卡，但是信息不在正确的位置。它应该在底部，但是，它被放置在其他地方。

为什么动态标签页的内容没有放在正确的位置？

我将 Bootstrap 3 用作仅供参考。

谢谢..

Answer 1

实际上，我刚刚发现。

我更改了以下代码：

  $('.tab-content').append('<div class="tab-pane" id="address_'+id+'">Test Address '+id+'</div>');

致：

 $('#test').append('<div class="tab-pane" id="address_'+id+'">Test Address '+id+'</div>');

成功了。

动态引导选项卡未正确显示

1 个答案: