在Bootstrap Collapse中添加active类，实现首次加载默认激活面板

没问题，要让你的Bootstrap Collapse组件在页面首次加载时默认激活一个面板，只需要做两个关键调整：给目标面板的折叠内容加上展开类，同时给对应的触发链接添上active类。结合你的PHP动态代码，这里是具体的实现方案：

修改后的完整代码 #

<div class="panel-group collapse-style-1" id="accordion">
    <?php 
    // 标记第一个面板，用来设置默认激活
    $isFirstPanel = true;
    foreach ($careers['result'] as $resclients){
        // 提前生成折叠面板的ID，避免重复写代码
        $collapsePanelId = "collapseOne" . $conn->stripval($resclients['career_id']);
    ?>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a 
                    data-toggle="collapse" 
                    data-parent="#accordion" 
                    href="#<?php echo $collapsePanelId;?>"
                    <!-- 第一个面板添加active类 -->
                    class="<?php echo $isFirstPanel ? 'active' : '';?>"
                >
                    <?php echo $resclients['career_title']; // 替换成你的面板标题字段 ?>
                </a>
            </h4>
        </div>
        <!-- 折叠内容容器：第一个面板添加in类（Bootstrap3）或show类（Bootstrap4+） -->
        <div 
            id="<?php echo $collapsePanelId;?>" 
            class="panel-collapse collapse <?php echo $isFirstPanel ? 'in' : '';?>"
        >
            <div class="panel-body">
                <?php echo $resclients['career_description']; // 替换成你的面板内容字段 ?>
            </div>
        </div>
    </div>
    <?php 
        // 处理完第一个面板后，把标记改为false
        $isFirstPanel = false;
    }
    ?>
</div>

关键修改说明 #

• 标记第一个面板：用$isFirstPanel变量跟踪循环的第一个项，初始设为true，处理完第一个面板后改为false，确保只有第一个面板被默认激活。
• 激活触发链接：给<a>标签添加条件类active，只有第一个面板的链接会带上这个类，对应激活样式。
• 默认展开面板内容：给面板内容的<div>（带panel-collapse collapse类的容器）添加条件类：
  • 如果是Bootstrap 3版本，用in类来默认展开面板；
  • 如果是Bootstrap 4或更高版本，把in换成show即可。

可选：默认激活特定ID的面板 #

如果你不想默认激活第一个，而是某个特定ID的面板，只需要把判断逻辑改成检查career_id是否等于目标ID就行，比如：

// 假设要默认激活ID为10的面板
$targetCareerId = 10;

// 触发链接的类判断
class="<?php echo $resclients['career_id'] == $targetCareerId ? 'active' : '';?>"

// 面板内容的类判断
class="panel-collapse collapse <?php echo $resclients['career_id'] == $targetCareerId ? 'in' : '';?>"

这样就能精准激活你想要的面板啦～

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