如何在PHP中递增WordPress选项卡的data-target值

针对你遇到的两个问题，通过PHP计数器就能解决，直接上代码示例：

1. 准备选项卡数据（可替换为WordPress自定义字段/文章循环） #

// 模拟选项卡数据，实际开发可从WordPress获取（如自定义字段、自定义文章类型循环）
$tabs = [
    ['title' => '选项卡1', 'content' => '这是选项卡1的内容'],
    ['title' => '选项卡2', 'content' => '这是选项卡2的内容'],
    ['title' => '选项卡3', 'content' => '这是选项卡3的内容'],
];

2. 生成选项卡导航（解决data-target递增和active类问题） #

echo '<div class="tab-nav">';
$tab_counter = 1; // 初始化计数器
foreach ($tabs as $tab) {
    // 仅第一个选项卡添加active类
    $active_class = $tab_counter === 1 ? 'active' : '';
    // 用计数器生成唯一的data-target值
    echo '<button class="tab-btn ' . esc_attr($active_class) . '" data-target="tab-' . $tab_counter . '">' . esc_html($tab['title']) . '</button>';
    $tab_counter++; // 计数器自增
}
echo '</div>';

3. 生成选项卡内容（对应匹配data-target） #

echo '<div class="tab-content-container">';
$tab_counter = 1; // 重置计数器（如果和导航循环分开执行的话）
foreach ($tabs as $tab) {
    $active_class = $tab_counter === 1 ? 'active' : '';
    // 内容id和导航的data-target一一对应
    echo '<div id="tab-' . $tab_counter . '" class="tab-content ' . esc_attr($active_class) . '">' . wp_kses_post($tab['content']) . '</div>';
    $tab_counter++;
}
echo '</div>';

配套CSS（实现显示/隐藏和active样式） #

/* 默认隐藏所有选项卡内容 */
.tab-content {
    display: none;
}
/* 显示激活状态的内容 */
.tab-content.active {
    display: block;
}
/* 激活状态的选项卡样式 */
.tab-btn.active {
    background-color: yellow;
    /* 可添加其他自定义样式 */
}

配套JS（实现点击切换） #

document.querySelectorAll('.tab-btn').forEach(button => {
    button.addEventListener('click', function() {
        // 移除所有选项卡的active类
        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
        // 给当前点击的选项卡加active类
        this.classList.add('active');
        
        const targetTab = this.getAttribute('data-target');
        // 移除所有内容的active类
        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
        // 显示目标内容
        document.getElementById(targetTab).classList.add('active');
    });
});

核心逻辑说明：

• 用$tab_counter计数器从1开始，每次循环后自增，确保data-target和内容id依次生成tab-1、tab-2、tab-3，实现一一对应。
• 通过判断$tab_counter === 1，仅给第一个选项卡和内容添加active类，解决默认样式问题。

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