本文讲解如何在 wordpress 中使用 advanced custom fields（acf）循环输出 tab 内容时，仅对第一个 tab-pane 元素动态添加 `active` 类，确保 bootstrap 选项卡初始状态正确激活。
在基于 ACF 构建的多 Tab 页面中（如“包含内容”模块），常需配合 Bootstrap 的 .tab-pane 实现切换效果。此时，仅首个面板应默认激活（即拥有 active 类），其余需保持无该类，否则所有面板可能同时显示或交互异常。
核心思路是：在 PHP 循环中引入计数器变量（如 $i = 0），利用其递增特性判断当前是否为首次迭代，并据此条件输出 active 类。
✅ 正确实现方式如下（已优化可读性与健壮性）：
<div class="tab-content mt-5">
<?php
$counter = 0;
if (have_rows('whats_included', 2959)) {
while (have_rows('whats_included', 2959)) {
the_row();
if (have_rows('list_data', 2959)) {
while (have_rows('list_data', 2959)) {
the_row();
// 仅第一个子项添加 'active' 类；注意：此处使用 $counter++（后置递增），确保首次进入时 $counter 为 0
$active_class = ($counter++ === 0) ? 'active' : '';
?>
<div id="<?php echo esc_attr(get_sub_field('id')); ?>"
class="container tab-pane <?php echo esc_attr($active_class); ?>">
<br>
<div class="row align-items-center justify-content-center">
<div class="col-lg-8">
<div class="talabat-clone-wrap radius5">
<img src="<?php echo esc_url(get_bloginfo('template_directory')) . '/assets/images/talabat-app/triangle.png'; ?>"
class="triangle-shape" alt="Triangle decoration">
<p><?php echo wp_kses_post(get_sub_field('text')); ?></p>
</div>
</div>
</div>
</div>
<?php
}
}
}
}
?>
</div>? 关键改进说明：
- 使用 get_sub_field() 替代 the_sub_field()（后者直接输出，无法安全用于属性值拼接），避免 XSS 风险并提升可控性；
- 对 id 属性使用 esc_attr()，对图片 URL 使用 esc_url()，对富文本内容使用 wp_kses_post()，保障安全性；
- 将逻辑判断提前赋值给 $active_class 变量，使 HTML 结构更清晰、易维护；
- 明确注释 $counter++ === 0 的执行时机（首次为 true，后续为 false），避免因前置/后置递增混淆导致首项失效。
⚠️ 注意事项：
- 若需支持多个独立 tab 组（如不同 section），请确保每个组内 $counter 独立初始化；
- Bootstrap 5+ 要求 .tab-pane 必须配合 .tab-content 及触发按钮（.nav-link[data-bs-toggle="tab"]）才能正常工作，请检查前端 JS 是否加载；
- ACF 字段 ID（如 'id'）建议设置为符合 HTML ID 规范（字母开头、仅含字母数字、连字符或下划线），否则可能导致 JS 错误。
通过以上方式，即可稳定、安全、语义化地实现 ACF 动态 tab 的初始激活逻辑。
