如何用JQuery默认显示单选按钮选中内容（WordPress/Elementor环境）

问题根源 #

你已经给第一个单选按钮设了默认选中，但页面加载时没触发内容切换，主要是这两个原因：

1. 你的jQuery代码只监听了click事件，但默认选中的单选按钮不会自动触发点击动作
2. Elementor是动态渲染页面，可能你的代码在元素还没加载完就执行了

实用解决方案 #

方法1：页面加载后主动触发默认按钮的点击 #

把这段代码加到你的自定义JS里（建议用Elementor的「自定义代码」功能，选页脚位置加载）：

jQuery(document).ready(function($) {
    // 你的原有切换逻辑（保留即可）
    $('input[type="radio"].category-tab').on('click', function() {
        // 假设你用data-target属性关联对应的产品div
        var target = $(this).data('target');
        // 隐藏所有产品div
        $('.product-content-wrap').hide();
        // 显示选中对应的div
        $(target).show();
    });

    // 关键：页面加载时，触发默认选中的单选按钮的点击事件
    $('input[type="radio"].category-tab:checked').trigger('click');
});

方法2：直接显示默认内容（避免事件冲突） #

如果触发点击事件还是不行，直接强制显示默认选中对应的div：

jQuery(document).ready(function($) {
    // 原有切换逻辑不变
    $('input[type="radio"].category-tab').on('click', function() {
        var target = $(this).data('target');
        $('.product-content-wrap').hide();
        $(target).show();
    });

    // 直接找到默认选中按钮对应的div并显示
    var defaultContent = $('input[type="radio"].category-tab:checked').data('target');
    $(defaultContent).show();
});

方法3：适配Elementor动态加载 #

如果是Elementor延迟加载导致元素没找到，改用window.load时机：

jQuery(window).on('load', function() {
    var $ = jQuery;
    // 原有切换逻辑
    $('input[type="radio"].category-tab').on('click', function() {
        var target = $(this).data('target');
        $('.product-content-wrap').hide();
        $(target).show();
    });

    // 触发默认按钮事件
    $('input[type="radio"].category-tab:checked').trigger('click');
});

关键提示 #

• 给所有单选按钮加统一的类名（比如category-tab），每个按钮的data-target要对应产品div的选择器（比如#laptops-content）
• 不要直接修改主题的functions.php，用Elementor自定义代码或者插件（比如Simple Custom CSS and JS）加JS，更安全
• 检查WooCommerce的产品循环有没有生成重复的div ID，要是有就改用类名来控制

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