WordPress环境下JQuery标签切换脚本失效问题求助

看起来你遇到的核心问题是点击标签切换按钮时页面刷新，功能失效，这在WordPress环境里很常见，主要是因为WordPress的jQuery特性、HTML结构问题和默认事件没阻止导致的。我帮你拆解问题并给出具体解决方案：

一、最直接的原因：未阻止链接/表单的默认行为 #

你的切换按钮是<a href="#">标签，而且整个内容包裹在<form>里，点击时会触发两个默认行为：

1. <a>标签的锚点跳转（虽然是#，但部分场景下会触发页面刷新）
2. 表单的默认提交行为（尤其是你在tab-5的返回按钮上错误加了type="submit"属性）

修复方法： #

1. 移除错误的type="submit"属性：

   <!-- 把这个按钮的type="submit"删掉 -->
   <a data-tab="4" class="tab-change btn btn-danger pull-left" href="#">Gå tilbage</a>
   

2. 在点击事件里阻止默认行为：
   在你的jQuery代码中，给点击事件添加e.preventDefault()：

   $('.tab-change').on('click', function(e) {
       e.preventDefault(); // 关键：阻止链接跳转和表单提交
       // 你的标签切换逻辑
       var targetTab = $(this).data('tab');
       $('.tab').hide();
       $('.tab-' + targetTab).show();
   });
   

二、适配WordPress的jQuery NoConflict模式 #

WordPress默认会释放jQuery的$别名，直接用$会报$ is not defined错误，导致脚本完全失效。有两种适配方式：

方式1：用闭包包裹代码 #

(function($){
    // 这里可以正常使用$
    $(document).ready(function() {
        // 初始化：只显示第一个标签
        $('.tab').not('.tab-1').hide();

        // 标签切换事件
        $('.tab-change').on('click', function(e) {
            e.preventDefault();
            var targetTab = $(this).data('tab');
            $('.tab').hide();
            $('.tab-' + targetTab).fadeIn(); // 平滑切换效果
        });
    });
})(jQuery); // 把WordPress的jQuery传入闭包

方式2：直接使用jQuery代替$ #

jQuery(document).ready(function() {
    jQuery('.tab').not('.tab-1').hide();

    jQuery('.tab-change').on('click', function(e) {
        e.preventDefault();
        var targetTab = jQuery(this).data('tab');
        jQuery('.tab').hide();
        jQuery('.tab-' + targetTab).show();
    });
});

三、补全截断的脚本代码 #

你提供的脚本里$.unserialize函数没写完（var pairs = str.sp这里截断了），这会导致脚本报错中断。补全后的函数示例：

$.unserialize = function(serializedString){
    var str = decodeURI(serializedString);
    var pairs = str.split('&'); // 这里应该是split方法
    var obj = {};
    for(var i = 0; i < pairs.length; i++){
        var pair = pairs[i].split('=');
        obj[pair[0]] = pair[1];
    }
    return obj;
};

四、规范WordPress脚本加载（可选但推荐） #

不要直接在页面硬编码<script>标签引入jQuery，WordPress自带了jQuery，用官方方法加载更安全：

1. 在主题的functions.php中添加：

   function enqueue_custom_tab_script() {
       // 加载WordPress自带的jQuery
       wp_enqueue_script('jquery');
       // 加载你的自定义脚本文件（假设放在主题的js文件夹）
       wp_enqueue_script('custom-tab-script', get_template_directory_uri() . '/js/custom-tabs.js', array('jquery'), '1.0', true);
   }
   add_action('wp_enqueue_scripts', 'enqueue_custom_tab_script');
   

2. 把你的jQuery代码放到wp-content/themes/你的主题/js/custom-tabs.js文件里。

五、修复无效的HTML结构 #

你的tab-6里嵌套了另一个<form>标签，这是HTML不允许的（表单不能嵌套），会导致浏览器解析异常，建议把内部表单移到外部，或者合并成一个表单。

按照以上步骤修改后，你的标签切换功能应该就能在WordPress里正常运行，不会再出现页面刷新的问题了。

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