WordPress：如何根据当前slug为对应表单添加active类

核心问题修正说明 #

你的代码存在两个关键问题：

1. HTML中重复使用了id="app"和id="form"，ID必须唯一，会导致样式和JS选择器失效
2. CSS选择器写法错误，.local .active是选择.local下的.active子元素，正确写法应为.local.active（匹配同时拥有两个类的元素）

以下提供两种实现方案：

PHP 服务端实现方案 #

直接在渲染时根据当前Slug为对应表单添加active类，无需前端额外处理：

<?php
// 根据实际场景获取当前Slug：
// 单页面场景：
$current_slug = get_post_field('post_name', get_post());
// 标签存档页场景：
// $current_slug = get_queried_object()->slug;
?>

<div class="app">
    <div id="local-form" class="form local <?php echo $current_slug === 'local' ? 'active' : ''; ?>">
        <h3><span><?php the_title(); ?></span><br>Local Application Form</h3>
        <!-- 本地表单内容 -->
    </div>
</div>

<div class="app">
    <div id="international-form" class="form international <?php echo $current_slug === 'international' ? 'active' : ''; ?>">
        <h3><span><?php the_title(); ?></span><br>International Application Form</h3>
        <!-- 国际表单内容 -->
    </div>
</div>

修正后的CSS：

/* 默认隐藏所有表单 */
.form.local, .form.international {
    display: none;
}
/* 显示带有active类的目标表单 */
.form.local.active, .form.international.active {
    display: block !important;
}

JavaScript 前端实现方案 #

适合需要动态切换场景，先通过PHP传递当前Slug，再用JS控制类名：

HTML 结构 #

<!-- 存储当前Slug的隐藏元素 -->
<input type="hidden" id="current-slug" value="<?php echo $current_slug; ?>">

<div class="app">
    <div class="form local">
        <h3><span><?php the_title(); ?></span><br>Local Application Form</h3>
        <!-- 本地表单内容 -->
    </div>
</div>

<div class="app">
    <div class="form international">
        <h3><span><?php the_title(); ?></span><br>International Application Form</h3>
        <!-- 国际表单内容 -->
    </div>
</div>

JS 逻辑 #

// 获取当前Slug
const currentSlug = document.getElementById('current-slug').value;
// 获取表单元素
const localForm = document.querySelector('.form.local');
const internationalForm = document.querySelector('.form.international');

// 切换active类
if (currentSlug === 'local') {
    localForm.classList.add('active');
    internationalForm.classList.remove('active');
} else if (currentSlug === 'international') {
    internationalForm.classList.add('active');
    localForm.classList.remove('active');
}

配套CSS #

同PHP方案中的修正后CSS代码。

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