如何给PHP foreach循环首个迭代的Tab添加active CSS类？

有两种简单的实现方式，直接修改现有代码即可：

方法一：利用foreach键名判断 #

将foreach改为带键名的形式，通过判断键是否为0（PHP默认数字索引数组从0开始），为首个标签添加active类，同时同步设置按钮的样式和无障碍属性：

<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
    <?php foreach($content['tabs'] as $key => $tab){ 
        // 判断是否为第一个标签
        $isActive = $key === 0;
        $navItemClass = $isActive ? "nav-item active" : "nav-item";
        $navLinkClass = $isActive ? "nav-link active" : "nav-link";
        $ariaSelected = $isActive ? "true" : "false";
    echo 
       '<li class="'.$navItemClass.'" role="presentation">
           <button class="'.$navLinkClass.'" id="pills-'.$tab["label"].'-tab" 
           data-bs-toggle="pill" data-bs-target="#pills-'.$tab["label"].'" 
           type="button" role="tab" aria-controls="pills-'.$tab["label"].'" 
            aria-selected="'.$ariaSelected.'">
           <h2 class="h4">'.$tab["label"].'</h2>
           </button>
        </li>';
     } ?>
</ul>

方法二：手动添加计数器 #

如果你的标签数组不是数字索引格式，用计数器判断首个迭代更稳妥：

<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
    <?php $tabCount = 0;
    foreach($content['tabs'] as $tab){ 
        $isActive = $tabCount === 0;
        $navItemClass = $isActive ? "nav-item active" : "nav-item";
        $navLinkClass = $isActive ? "nav-link active" : "nav-link";
        $ariaSelected = $isActive ? "true" : "false";
    echo 
       '<li class="'.$navItemClass.'" role="presentation">
           <button class="'.$navLinkClass.'" id="pills-'.$tab["label"].'-tab" 
           data-bs-toggle="pill" data-bs-target="#pills-'.$tab["label"].'" 
           type="button" role="tab" aria-controls="pills-'.$tab["label"].'" 
            aria-selected="'.$ariaSelected.'">
           <h2 class="h4">'.$tab["label"].'</h2>
           </button>
        </li>';
        $tabCount++;
     } ?>
</ul>

关键注意点 #

• 不仅要给<li>标签加active，<button>的nav-link也要同步添加active，这是Bootstrap标签导航的样式要求
• 首个标签的aria-selected设为true，其余设为false，符合无障碍访问规范

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