Question

没有模态和ajax就可以正常工作。但是当我使用ajax在模态中加载选项卡式面板时，它不会选择Tab Panes。

<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-left">
    <li class="active tab-selection"><a data-toggle="tab" href="#financial">Financial</a></li>
    <li class="tab-selection"><a data-toggle="tab" href="#marketing">Marketing</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="financial">Financial Tab</div>
  <div class="tab-pane" id="marketing">Marketing Tab</div>      
</div>

AJAX

$.ajax({
        url : url,
        type : "POST", 
        success:function(data){
            $(".modal-body").html(data);
        }
  });

我的模态

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="previewForm" class="modal fade">
  <div class="modal-dialog" style="width: 675px">
    <div class="modal-content">
    <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h3 id="myModalLabel" class="modal-title">Preview</h3>
    </div>
        <div class="modal-body">
        </div>  
    </div>
 </div>
</div>

Answer 1

我找到了替代解决方案来显示关联tabbed-panel的{{1}}，如下所示。

nav-tab

Answer 2

带有data-attribute的标签在文档加载时执行。您将其称为 by ajax ，因此只需在成功时初始化标签组件。

这是一个例子（不是ajax，但点击按钮）：

Bootply ：http://www.bootply.com/sNQH8hGFY9

您的代码：

 $.ajax({
            url : url,
            type : "POST", 
            success:function(data){
                $(".modal-body").html(data);
                $('.modal-body .nav').tab();  //  <--- Look Here
            }
      });

Answer 3

还要确保“标签”的ID对于页面是唯一的。

Bootstrap选项卡无法通过模式中的AJAX工作

3 个答案: