AngularJS Bootstrap 选项卡在对话框中显示时不显示活动选项卡的任何内容答案

【问题标题】：AngularJS Boostrap tabs does not show anything for active tab when it is shown in dialogAngularJS Bootstrap 选项卡在对话框中显示时不显示活动选项卡的任何内容
【发布时间】：2020-06-29 09:58:10
【问题描述】：

我的 showDialog 中有很多选项卡，当我将tab_2 设置为活动状态时，内容没有显示任何奇怪的内容。

 <div class="portlet-body">
    <div class="tabbable-blue" id="my_tabDialog" style="margin:0px;">
        <ul class="nav nav-tabs nav-tabs-lg">
            <li id="li_tab_1">
                <a data-toggle="tab" href="#" data-target="#tab_1">
                    MyTab1
                </a>
            </li>
            <li id="li_tab_2" class="active">
                <a data-toggle="tab" href="#" data-target="#tab_2">
                    MyTab2
                </a>
            </li>
           
          
        </ul>
        <div class="tab-content">
            <div id="tab_1" class="tab-pane fade meter-tabs-height">   
                <div ng-include="'mytab1.html'"></div>         
            </div>
            <div id="tab_2" class="tab-pane fade in meter-tabs-height" active>

                <div ng-include="'mytab2.html'"></div>    
               
            </div>
       </div>
    </div>
</div>

当我第一次进入对话框时，对话框显示MyTab2，根本没有内容。但是，当我单击MyTab1，然后再次单击MyTab2 时，会出现内容。

这是怎么发生的，我该如何处理这个问题？谢谢。

【问题讨论】：

你能创建一个plnkr吗。
这能回答你的问题吗？ Bootstrap tab - active class not working on page loading
@Ryan，请参阅 this answer，我猜你将不得不删除 fade。而不是fade in 尝试active 类
@tanmay 是的，非常感谢。事实证明，我需要将active 作为class 插入我的代码中的一个属性。

标签： angularjs twitter-bootstrap-3 tabs bootstrap-modal

【解决方案1】：

我的代码出错了，加class="active"就可以解决了。

替换

<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
    <div ng-include="'mytab2.html'"></div>                
</div>

与

<div id="tab_2" class="tab-pane fade in meter-tabs-height active">
    <div ng-include="'mytab2.html'"></div>                
</div>

【讨论】：