本文讲解如何在 wordpress 中使用 advanced custom fields（acf）循环输出 tab 内容时，仅对第一个 tab-pane 元素动态添加 `active` 类，确保 bootstrap 选项卡初始状态正确激活。
在基于 ACF 构建的多 Tab 页面中（如“包含内容”模块），常需配合 Bootstrap 的 .tab-pane 实现切换效果。此时，仅首个面板应默认激活（即拥有 active 类），其余需保持无该类，否则所有面板可能同时显示或交互异常。
核心思路是：在 PHP 循环中引入计数器变量（如 $i = 0），利用其递增特性判断当前是否为首次迭代，并据此条件输出 active 类。
✅ 正确实现方式如下（已优化可读性与健壮性）：
? 关键改进说明：
- 使用 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 的初始激活逻辑。
)%20.%20'/assets/images/talabat-app/triangle.png';%20?>)
