求助：为Elementor Pro按钮添加点击变色并保持状态的代码

1. 给按钮添加标识 #

编辑每个Elementor按钮，在「高级」标签的「CSS类」中添加统一类名 color-toggle-btn，同时给每个按钮设置唯一ID（比如 btn-1、btn-2…btn-13）。

2. 自定义CSS样式 #

在Elementor「自定义CSS」区域或主题样式文件中添加以下样式，替换为你需要的颜色值：

/* 按钮默认样式 */
.color-toggle-btn {
    background-color: #ddd;
    transition: background-color 0.3s ease;
}

/* 按钮激活状态样式 */
.color-toggle-btn.active {
    background-color: #ff7f50;
}

3. 插入JavaScript代码 #

在Elementor「自定义代码」中新建JS代码块，设置加载位置为「页脚」，粘贴以下代码：

document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.color-toggle-btn');
    // 读取本地存储的激活按钮ID
    const activeBtnId = localStorage.getItem('activeToggleBtn');

    // 页面加载时恢复激活状态
    if (activeBtnId) {
        const targetBtn = document.getElementById(activeBtnId);
        targetBtn?.classList.add('active');
    }

    // 绑定按钮点击事件
    buttons.forEach(btn => {
        btn.addEventListener('click', function() {
            // 清除所有按钮的激活状态
            buttons.forEach(b => b.classList.remove('active'));
            // 给当前按钮添加激活状态
            this.classList.add('active');
            // 将当前按钮ID存入本地存储
            localStorage.setItem('activeToggleBtn', this.id);
        });
    });
});

适配动态生成按钮的版本 #

如果按钮是通过Elementor循环模块动态生成的，改用事件委托方式绑定事件（替换上述JS代码）：

document.addEventListener('DOMContentLoaded', function() {
    const activeBtnId = localStorage.getItem('activeToggleBtn');
    if (activeBtnId) {
        const targetBtn = document.getElementById(activeBtnId);
        targetBtn?.classList.add('active');
    }

    // 绑定到按钮父容器，替换为你实际的父容器选择器
    document.querySelector('.btn-group-wrapper').addEventListener('click', function(e) {
        if (e.target.classList.contains('color-toggle-btn')) {
            const buttons = document.querySelectorAll('.color-toggle-btn');
            buttons.forEach(b => b.classList.remove('active'));
            e.target.classList.add('active');
            localStorage.setItem('activeToggleBtn', e.target.id);
        }
    });
});

注：将 .btn-group-wrapper 替换为你13个按钮所在父元素的类名/ID。

4. 关键说明 #

• 本地存储（localStorage）会持久保存激活状态，即使用户跳转表单页面后返回，状态依然保留（除非用户手动清除浏览器缓存）。
• 确保所有按钮ID唯一，避免冲突。
• 样式和代码中的颜色值、过渡效果可根据需求自定义调整。

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