Bootstrap 5初始Tab的active类首次点击后未移除问题排查

我正在用Bootstrap 5适配产品图片展示页面，页面包含主图展示区、下方缩略图切换栏，以及Lightbox大图查看功能。代码默认将初始图片（img-0）设置为active状态，页面加载时能正常显示该图。但首次点击其他缩略图（比如img-1）时，img-0的active类不会被移除，只有img-1会新增active类；后续再点击切换就恢复正常了。网站使用jQuery 3.4.1、Bootstrap 5.2.2，我是Bootstrap新手，想知道是不是漏了配置，或者需要额外加JS来处理初始active类的移除？

后端生成代码 #

echo "<div class='single-product-tab-content'>";
    ## DISPLAY MAIN IMAGE ##
    if (count($image_array) > 1) 
    {           
        echo "<div class='tab-content'>";
            foreach ($image_array as $key => $data) 
            {
                if (file_exists($site['url']['path'].$site['path']['product']['full'].$data['productImageFile'])) 
                {
                    if($key == 0)
                    {
                        echo "<div role='tabpanel' class='tab-pane active' id='img-".$key."'>";
                    }
                    else
                    {
                        echo "<div role='tabpanel' class='tab-pane' id='img-".$key."'>";
                    }
                        echo "<a href='".$site['url']['full'].$site['path']['product']['full'].$data['productImageFile']."'  data-lightbox='lightbox[".$value['productId']."]' data-title='".$image_array[$site['url']['decode']['photo']]['productImageTitle']."'>";
                            echo "<img src='".$site['url']['full'].$site['path']['product']['full'].$data['productImageFile']."' alt='".$data['productImageDescription']."' title='".$data['productImageTitle']."' />";
                            echo "<span class='view-full-screen' ><i class='fa-solid fa-arrows-maximize'></i> view full screen</span>";
                        echo "</a>";
                    echo "</div>";
                }
            }
        echo "</div>";
    }
    
    ## DISPLAY IMAGE THUMBNAILS ##
    if (count($image_array) > 1) 
    {
        echo "<ul class='nav'>";
            foreach ($image_array as $key => $data) 
            {
                if (file_exists($site['url']['path'].$site['path']['product']['thumb'].$data['productImageFile'])) 
                {
                        if($key == 0)
                        {
                            echo "<li class='active'>";
                        }
                        else
                        {
                            echo "<li>";
                        }
                        echo"<a href='#img-".$key."'  data-bs-toggle='tab'><img src='".$site['url']['full'].$site['path']['product']['thumb'].$data['productImageFile']."' alt='".$data['productImageDescription']."' title='".$data['productImageTitle']."' /></a></li>";
                }
            }
        echo "</ul>";                   
    }               

echo "</div>";

前端生成代码 #

<div class="single-product-tab-content">
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active show" id="img-0">
            <a href="https://www.mywebsite.com/content/product/full/Tuberous_Begonia_Tubers___Hanging_Basket_Tubers___Mixed-971-941.jpg" data-lightbox="lightbox[941]" data-title="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed">
                <img src="https://www.mywebsite.com/content/product/full/Tuberous_Begonia_Tubers___Hanging_Basket_Tubers___Mixed-971-941.jpg" alt="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed" title="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed">
                <span class="view-full-screen"><i class="fa-solid fa-arrows-maximize"></i> view full screen</span>
            </a>
        </div>
        <div role="tabpanel" class="tab-pane" id="img-1">
            <a href="https://www.mywebsite.com/content/product/full/Tuberous_Begonia_Tubers___Hanging_Basket_Tubers___Mixed-972-941.jpg" data-lightbox="lightbox[941]" data-title="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed">
                <img src="https://www.mywebsite.com/content/product/full/Tuberous_Begonia_Tubers___Hanging_Basket_Tubers___Mixed-972-941.jpg" alt="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed" title="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed">
                <span class="view-full-screen"><i class="fa-solid fa-arrows-maximize"></i> view full screen</span>
            </a>
        </div>
    </div>
    <ul class="nav" role="tablist">
        <li class="active">
            <a href="#img-0" data-bs-toggle="tab" aria-selected="true" role="tab" class="active">
                <img src="https://www.mywebsite.com/content/product/thumb/Tuberous_Begonia_Tubers___Hanging_Basket_Tubers___Mixed-971-941.jpg" alt="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed" title="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed">
            </a>
        </li>
        <li>
            <a href="#img-1" data-bs-toggle="tab" aria-selected="false" role="tab" class="" tabindex="-1">
                <img src="https://www.mywebsite.com/content/product/thumb/Tuberous_Begonia_Tubers___Hanging_Basket_Tubers___Mixed-972-941.jpg" alt="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed" title="Tuberous Begonia Tubers   Hanging Basket Tubers   Mixed">
            </a>
        </li>
    </ul>
</div>

问题现象 #

• 仅在页面首次加载或**强制刷新（如Ctrl+F5）**时出现
• 异常状态：首次点击其他缩略图后，两个主图容器（tab-pane）同时显示，查看DOM会发现它们都带有active类
• 正常状态：后续切换时，只有当前选中的主图容器和对应的缩略图链接带有active类
• 参考了一款电商模板的产品图片切换实现

这个问题的核心是Bootstrap 5标签页组件的初始化逻辑，以及当前HTML结构的小问题，按以下步骤修复：

1. 调整缩略图导航的active类位置 #

Bootstrap 5的标签页导航，active类应该加在<a>标签上，而非同时加在<li>和<a>上。你当前的后端代码给初始<li>加了active，但Bootstrap会自动给激活的<a>添加active，导致首次点击时状态冲突。

修改后端生成缩略图的代码：

// 原代码
if($key == 0)
{
    echo "<li class='active'>";
}
else
{
    echo "<li>";
}
echo"<a href='#img-".$key."'  data-bs-toggle='tab'>...</a></li>";

// 修改后
echo "<li>";
    if($key == 0)
    {
        echo"<a href='#img-".$key."'  data-bs-toggle='tab' class='active'>";
    }
    else
    {
        echo"<a href='#img-".$key."'  data-bs-toggle='tab'>";
    }
    echo "<img src='".$site['url']['full'].$site['path']['product']['thumb'].$data['productImageFile']."' alt='".$data['productImageDescription']."' title='".$data['productImageTitle']."' /></a>";
echo "</li>";

2. 修正主图容器的初始类 #

Bootstrap 5的tab-pane初始激活状态需要同时拥有active show类，后端代码直接生成完整类名，避免Bootstrap初始化时的状态不一致：

if($key == 0)
{
    echo "<div role='tabpanel' class='tab-pane active show' id='img-".$key."'>";
}
else
{
    echo "<div role='tabpanel' class='tab-pane' id='img-".$key."'>";
}

3. 手动初始化标签页（可选，解决极端情况） #

如果上述修改后仍有问题，可在页面加载完成后手动初始化标签页，确保事件绑定正确：

$(document).ready(function(){
    // 初始化激活的标签页
    new bootstrap.Tab(document.querySelector('.nav a.active'));
});

问题根源 #

你给<li>加了active类，但Bootstrap 5的标签页逻辑是基于<a>标签的active状态和aria-selected属性。首次点击时，Bootstrap会给目标<a>添加active，但不会自动移除<li>上的active，同时主图容器初始只有active没有show，导致切换时旧容器未被隐藏，最终出现两个主图同时显示的异常。

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