Magento2中基于PHP与AlpineJS实现单标签页切换功能问题排查

你的核心问题是每个section都独立维护了activeTab状态，导致标签之间的状态不共享，无法实现互斥切换。下面是修正后的完整代码，同时优化了代码冗余：

<div class="grid lg:grid-cols-2" x-data="{ activeTab: '<?= $escaper->escapeHtmlAttr($firstSectionName) ?>' }">
    <?php
    // 提前获取所有标签页名称，避免重复调用方法
    $sectionNames = $block->getGroupSortedChildNames('detailed_info', '');
    $firstSectionName = reset($sectionNames);
    
    foreach ($sectionNames as $key => $sectionName) {
        $sectionBlock  = $block->getLayout()->getBlock($sectionName);
        $sectionHtml   = (string) $sectionBlock->toHtml();
        $titleTemplate = $sectionBlock->getData('title_template') ?? $defaultTitleTemplate;

        if (empty(trim($sectionHtml))) {
            continue;
        }
        
        $currentSectionName = $escaper->escapeHtmlAttr($sectionName);
        ?>

        <section id="<?= $escaper->escapeHtmlAttr($sectionBlock->getNameInLayout()) ?>">
            <div 
                x-on:click.prevent="activeTab = '<?= $currentSectionName ?>'" 
                class="flex font-light items-center justify-between cursor-pointer" 
                :class="{ 'font-bold': activeTab === '<?= $currentSectionName ?>' }"
            >
                <?=
                $titleRenderer->setTemplate($titleTemplate)
                    ->assign('sectionBlock', $sectionBlock)
                    ->toHtml()
                ?>
            </div>

            <div class="my-6 w-full" x-show="activeTab === '<?= $currentSectionName ?>'">
                <?= /** @noEscape  */ $sectionHtml ?>
            </div>
        </section>
    <?php } ?>
</div>

关键修改说明： #

• 共享状态：把x-data从每个<section>移到最外层的<div>上，让所有标签页共用同一个activeTab状态，确保点击切换时状态全局生效。
• 优化冗余：提前把getGroupSortedChildNames的结果赋值给$sectionNames变量，避免循环中重复调用方法，提升性能。
• 修正高亮逻辑：把标题栏的:class判断从未定义的open改为activeTab === 当前标签名称，实现当前激活标签的字体加粗效果。
• 安全转义：对所有输出到HTML的变量使用$escaper转义，避免XSS风险。

这样修改后，就能实现默认打开第一个标签页，点击其他标签时自动关闭已打开标签的互斥效果。

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