如何在PHP的Foreach循环中正确实现navbar tabs导航标签切换功能

代码存在的核心问题 #

• 遍历商品分类的第一个foreach循环结束后，才执行遍历分类下商品的第二个foreach，此时$newAddons仅保留最后一个分类的值，直接导致标签生成和对应内容匹配逻辑完全错位
• 标签a标签的href属性引用的$itm_id未在第一个循环中定义，所有标签锚点错误，无法关联到对应内容区域
• 所有li标签和tab-pane都加了active类，不符合Bootstrap标签页的交互规则，会导致点击切换失效
• 加减按钮、数量输入框使用固定id，多组元素会出现id重复，导致交互事件触发异常

修正后代码 #

<div class="commerce-tabs">
    <ul class="nav nav-tabs tabs">
        <?php 
        $i = 0;
        foreach($Addons as $newAddons){ 
            // 假设分类有唯一标识cat_id，可替换为实际的分类主键字段
            $cat_id = $newAddons->cat_id;
        ?>
        <li class="<?php echo $i == 0 ? 'active' : ''; ?>">
            <a data-toggle="tab" href="#tab-noo_boxes_tab<?php echo $cat_id;?>">
                <?php echo $newAddons->cat_name; ?></a>
        </li>
        <?php 
        $i++;
        } ?>
    </ul>
    <div class="tab-content" style="background-color: #fff;">
        <?php 
        $i = 0;
        foreach($Addons as $newAddons){ 
            $cat_id = $newAddons->cat_id;
        ?>
            <?php foreach($newAddons->Items as $newnewAddons){?>
            <input type="hidden" name="addons_item_name[]" value="<?php echo $newnewAddons->item_name;?>">
            <input type="hidden" name="itm_ids[]" value="<?php echo $newnewAddons->itm_id;?>">
            <input type="hidden" name="uom_id[]" value="<?php echo $newnewAddons->uom_id;?>">
            <input type="hidden" name="sh_price[]" value="<?php echo $newnewAddons->sh_price;?>">
            <input type="hidden" name="totalAmt[]" value="<?php echo $newnewAddons->totalAmt;?>">
            <input type="hidden" name="total_net_amt[]" value="<?php echo $newnewAddons->total_net_amt;?>">
            <input type="hidden" name="adonprice[]" value="<?php echo $newnewAddons->price;?>">
            <div class="content2">
                <br>
                <div class="wrap row">
                    <div class="tab-pane fade in <?php echo $i == 0 ? 'active' : ''; ?>" id="tab-noo_boxes_tab<?php echo $cat_id;?>" style="background-color: #fff;">
                        <div class="col-md-4">
                            <?php echo $newnewAddons->item_name;?></div>
                        <div class="col-md-2" style="text-align: center;">
                            <button type="button" class="sub single_add_to_cart_button button">-</button>
                        </div>
                        <div class="col-md-4" style="text-align: center;">
                            <input class="count form-control" type="text" name="itm_weight[]" value="0" min="0" max="100" />
                        </div>
                        <div class="col-md-2" style="text-align: center;">
                            <button type="button" class="add single_add_to_cart_button button">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <?php }?>
        <?php 
        $i++;
        } ?>
    </div>
</div>

调整说明 #

1. 将商品遍历的foreach嵌套到分类遍历的逻辑内，保证每个分类下的商品都能对应到正确的标签页
2. 用分类唯一标识生成标签锚点和对应内容区域的id，保证两者关联正确
3. 新增计数器控制active类，仅第一个标签和对应内容默认激活
4. 删除元素的固定id，避免id重复导致的交互异常，后续加减按钮的点击事件可通过类名绑定，用父子节点关系定位对应的数量输入框修改数值

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