Wix网站按钮#button5页面切换时背景颜色设置求助

1. 默认颜色设置 #

先在Wix编辑器里选中#button5，在右侧样式面板把背景色设为白色，这是按钮的默认状态。

2. 用Velo代码实现页面切换时的颜色变化 #

你需要添加Velo代码监听页面导航，自动切换按钮颜色：

代码放置位置 #

• 如果按钮在页眉/页脚这类全局组件中，把代码放在「代码 > 全局代码 > site.js」文件里
• 如果按钮仅存在于特定页面，就放在对应页面的代码编辑区域

代码内容 #

import wixWindow from 'wix-window';

$w.onReady(() => {
    // 页面加载完成后先初始化按钮颜色
    updateButtonColor();
    // 监听页面切换事件，每次跳转页面后更新按钮颜色
    wixWindow.onNavigate(updateButtonColor);
});

function updateButtonColor() {
    // 替换成你网站联系页面的实际路径，比如'/联系我们'或'/contact'
    const contactPagePath = '/contact';
    const isOnContactPage = wixWindow.currentPage.url.includes(contactPagePath);
    
    if (isOnContactPage) {
        $w('#button5').style.backgroundColor = '#ff0000'; // 设置为红色
    } else {
        $w('#button5').style.backgroundColor = '#ffffff'; // 恢复为白色
    }
}

关键注意事项 #

• 务必把contactPagePath的值替换成你网站联系页面的真实路径，你可以在编辑器打开联系页面时，查看地址栏中域名后的路径部分
• 测试时请点击「预览」功能，编辑器实时预览可能不会触发页面导航事件，需要实际切换页面查看效果

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