Bootstrap 3.3.1升级到4.6.0后动态标签页随机加载异常问题

• Bootstrap 4.x 与 3.x 的标签页类名规则、DOM结构要求差异较大，你沿用了3.x的类名绑定逻辑，同时自定义的激活逻辑和Bootstrap原生逻辑冲突，是出现随机加载异常的核心原因
• 缺失Bootstrap 4标签页要求的基础类nav-item、nav-link，导致部分动态生成的标签事件绑定失败
• Bootstrap 4中激活状态的标签面板需要同时携带active和show两个类，你只加了active类，会导致部分面板显示异常

1. 修正标签导航代码 #

给<li>添加nav-item类，给<a>添加nav-link类，同时将active类从<li>转移到<a>标签上，修改后代码如下：

<div id="divRiskLOBs" class="width100p">
    <ul class="nav nav-tabs">
        @if (Model.RiskLOBList != null)
        {
            int i = 0;
            foreach (var item in Model.RiskLOBList.Where(x => x.Parent_ID == null))
            {
                string activeClass = "";
                if (!string.IsNullOrWhiteSpace(Model.RiskCoverageTabID) && item.LOB_ID_EN == Model.RiskCoverageTabID)
                {
                    activeClass = "active";
                }
                else if (string.IsNullOrWhiteSpace(Model.RiskCoverageTabID) && i == 0)
                {
                    activeClass = "active";
                }
                <li class="nav-item">
                    <a href="#@item.LOB_ID_EN" class="aTab nav-link @activeClass" data-toggle="tab" data-id="@item.LOB_ID_EN">
                    </a>
                </li>
                i++;
            }
            <li class="nav-item">
                <a href="#tabExceptions" class="aTab nav-link" data-toggle="tab" data-id="" id="aExceptions1"><strong>Exceptions</strong></a>
            </li>
        }
        <li id="liActivity" class="nav-item">
            <a href="#tabActivity" class="aTab nav-link" data-toggle="tab" data-id="" id="aRequestActivity"><strong>Activity</strong></a>
        </li>
        <li id="liDocuments" class="nav-item">
            <a href="#tabDocuments" class="aTab nav-link" data-toggle="tab" data-id="" id="aDocuments"><strong>Documents</strong></a>
        </li>
    </ul>
</div>

2. 修正标签面板代码 #

激活状态的tab-pane同时添加active和show类，修改后代码如下：

<div class="tab-content mb30">
    @if (Model.RiskLOBList != null)
    {
        int j = 0;
        foreach (var item in Model.RiskLOBList.Where(x => x.Parent_ID == null))
        {
            string activeClass = "";
            if (!string.IsNullOrWhiteSpace(Model.RiskCoverageTabID) && item.LOB_ID_EN == Model.RiskCoverageTabID)
            {
                activeClass = "active show";
            }
            else if (string.IsNullOrWhiteSpace(Model.RiskCoverageTabID) && j == 0)
            {
                activeClass = "active show";
            }
            <div class="tab-pane @activeClass" id="@item.LOB_ID_EN">
                <div class="col-sm-4">
                </div>
                <div class="col-sm-8 align-right mb10 divRiskActionButton">
                   ///my code
                </div>
            </div>
            j++;
        }
        <div class="tab-pane row" id="tabExceptions">
               //my code
        </div>
    }
    <div class="tab-pane" id="tabActivity">
        //my code
    </div>
    <div class="tab-pane" id="tabDocuments">
        //my code
    </div>
</div>

3. 删除自定义的标签激活JS #

你额外写的如下点击事件会和Bootstrap原生的tab切换逻辑冲突，直接删除即可：

// 整段删除以下代码
$(document).on("click", ".nav-tabs li a", function (e) {
    $(".nav-tabs li").removeClass("active");
    $(this).parent().addClass("active");
});

内容的提问来源于stack exchange，提问作者HAREESH PONNAM